import { createSlice } from '@reduxjs/toolkit' export const countersSlice = createSlice({ name: 'based? based on what', initialState: [0, 0, 0, 0], reducers: { updateCounter: (state, action) => { var id = action.payload.id var value = action.payload.value state[id] += value } } }) export const { updateCounter } = countersSlice.actions export const selectCount = id => state => state.counter[id] export default countersSlice.reducer ¿Por qué, en la línea selectCount , tengo que usar state.counter cuando no se hace referencia a .counter en ningún otro lugar del segmento? Me gusta que sea .counter pero solo quiero entender cómo surge esa propiedad.
La propiedad de name en createSlice es utilizada internamente por redux-toolkit para crear los nombres de sus acciones. Si el nombre es 'counter' , la acción updateCounter tendrá { type: 'counter/updateCounter' } . Si es 'abc' , su acción tendrá { type: 'abc/updateCounter' } . Este nombre no importa . Mientras sea diferente de cualquier otro reductor en su aplicación, entonces está bien.
Si cambio .counter a otra cosa, rompe todo el proyecto
Ahora está hablando de otra cosa, que es cómo selecciona sus datos desde el estado raíz de su aplicación.
export const selectCount = id => state => state.counter[id] Esta función de selector asume que el reductor de este segmento estará en la propiedad de counter de su reductor raíz. La ubicación de este reductor en relación con el estado raíz está determinada por la clave de propiedad cuando combina sus reductores con configureStore o combineReducers .
Su selector actual asume que su tienda se ve así:
import {configureStore} from '@reduxjs/toolkit'; import counterReducer from './yourReducerFile.js' export default configureStore({ reducer: { counter: counterReducer } }); Esta clave de propiedad a menudo coincide con el name de su segmento, pero no tiene que coincidir con .
Puede usar cualquier clave de propiedad siempre que la función de selección use la misma. Por ejemplo:
export default configureStore({ reducer: { someOtherProperty: counterReducer } }); export const selectCount = id => state => state.someOtherProperty[id]