Estoy usando Redux-toolkit con entityAdapter para la gestión de estado en mi aplicación React. Quiero aplicar la clasificación de tablas para cada columna donde las filas de mi tabla son entidades del adaptador de entidad Redux-toolkit. Quiero cambiar la función sortComparer de esta manera en mi reductor.
sortEntities: (state,action) =>{ return { ...state, sortComparer:(a:myEntityType,b:myEntityType)=> a.title.localCompare(b.title) }; },Envío la acción sortEntities en el controlador de columnas onClick. Este tipo de cambio de sortComparer no arroja ningún error de volatilidad de reglas, pero no funciona. ¿Puede alguien ayudarme?
Lo que está haciendo en el código anterior es almacenar una function en la propiedad sortComparer de su estado. En realidad, no está aplicando la función de clasificación en ninguna parte, y no es recomendable almacenar datos no serializables como funciones en Redux.
El adaptador que crea al llamar a createEntityAdapter es un objeto que lo ayuda a interactuar con el estado. El estado en sí es solo una matriz de ids y un objeto de diccionario de entities . La propiedad sortComparer del adaptador no forma parte del estado, por lo que no se puede modificar modificando el estado.
Hay muchas maneras de abordar esto.
Por ejemplo, podría seleccionar todas las entidades de Redux y ordenarlas localmente.
const useSortedEntities = (sortBy) => { // get an array of entities with the selector from the entity adapter const allEntities = useSelector(selectEntities); // sort based on the current property // use ... to avoid mutation // would probably want to memoize this return [...allEntities].sort( (a, b) => a[sortBy].localCompare(b[sortBy]) ); } const SomeComponent = () => { const [sortProperty, setSortProperty] = useState('author'); const sortedList = useSortedEntities(sortProperty); ... O puede dispatch una acción con la propiedad de clasificación en la carga útil y guardar la propiedad de clasificación en Redux. Luego puede usar createSelector para crear un selector para los datos ordenados.
const mySlice = createSlice({ name: 'someName', initialState: myAdapter.getInitialState({ // additional properties to include in initial state sortBy: 'author' }), reducers: { sortEntities: (state, action: PayloadAction<string>) => { state.sortBy = action.payload; } ... const selectSortedEntities = createSelector( // first select entities with the selector from the adapter selectEntities, // next select the sort order (state: RootState) => state.pathToSlice.sortBy // then combine them to return a sorted array (allEntities, sortBy) => [...allEntities].sort( (a, b) => a[sortBy].localCompare(b[sortBy]) ); ) const SomeComponent = () => { const sortedList = useSelector(selectSortedEntities); const dispatch = useDispatch(); const onClick = () => { dispatch(sortEntities('title')); } ...