Veo errores de tipo TS que intentan pasar el estado a una función CRUD del adaptador de entidad
sandbox en vivo (con línea errónea comentada):
https://codesandbox.io/s/createentityadapter-demo-5rvl4
crear adaptador de libros
const booksAdapter = createEntityAdapter<Book>({ selectId: (book) => book.bookId, sortComparer: (a, b) => a.title.localeCompare(b.title) });...crear un segmento y configurar la tienda
const booksSlice = createSlice({ name: "books", initialState: booksAdapter.getInitialState(), reducers: { // Can pass adapter functions directly as case reducers. Because we're passing this // as a value, `createSlice` will auto-generate the `bookAdded` action type / creator bookAdded: booksAdapter.addOne, bookRemoved: booksAdapter.removeOne, bookUpdated: booksAdapter.updateOne, booksReceived(state, action) { // Or, call them as "mutating" helpers in a case reducer booksAdapter.setAll(state, action.payload.books); } } }); export const store = configureStore({ reducer: { books: booksSlice.reducer } });... el envío funciona como se esperaba
store.dispatch(bookAdded({ bookId: 1, title: "title 1" })); store.dispatch(bookAdded({ bookId: 2, title: "title 2" })); store.dispatch(bookAdded({ bookId: 3, title: "title 3" }));pero recibo un error cuando recupero el estado de la tienda e intento usarlo en una llamada imperativa a adapter.addOne (es decir, no a través del reductor)
let storeState = store.getState(); console.log("storeState", storeState, typeof storeState); // booksAdapter.addOne(storeState, { id: 4, title: "title 4" });console.log de storeState parece un objeto válido...
storeState {books: Object} books: Object ids: Array(3) 0: 1 1: 2 2: 3 entities: Object 1: Object 2: Object 3: Object objectpero la línea (comentada)
booksAdapter.addOne(storeState, { id: 4, title: "title 4" });da como resultado un error de TS:
let storeState: { books: EntityState<Book>; } No overload matches this call. Overload 1 of 2, '(state: EntityState<Book>, entity: Book): EntityState<Book>', gave the following error. Argument of type '{ books: EntityState<Book>; }' is not assignable to parameter of type 'EntityState<Book>'.No entiendo por qué hay una falta de coincidencia ya que estoy pasando la tienda directamente.
Probé esto en JS y, por supuesto, no hay problemas de tipo y simplemente funciona. Entonces, mi pregunta es: ¿cuál es el objeto de estado correcto para pasar a las funciones CRUD cuando se usa TS si no es el resultado de store.getState()?
Los datos están en storeState.books , no en storeState .
Entonces tendrás que llamar
booksAdapter.addOne(storeState.books, { id: 4, title: "title 4" });tenga en cuenta que esto no modificará su estado, sino que solo le dará una copia modificada de dicho estado. Puede modificar su estado solo a través de un envío de acción.