Para agregar datos al estado, no podemos usar el método push ya que devuelve un número, no una matriz recién creada. Sin embargo, podemos usar el método push para agregar nuestros datos al estado y devolverlos. ¿Por qué es defectuoso este enfoque?
switch (action.type) { case "ADD_TODO": state.push(action.payload); // return [...state, action.payload]; return state; const addTodo1 = { type: "ADD_TODO", payload: { id: 1, name: "Learn Redux", complete: false, }, }; const addTodo2 = { type: "ADD_TODO", payload: { id: 2, name: "Learn JavaScript", complete: true, }, }; const addTodo3 = { type: "ADD_TODO", payload: { id: 3, name: "Read a book", complete: false, }, }; const removeTodo1 = { type: "REMOVE_TODO", id: 1, }; const toggleTodo = { type: "TOGGLE_TODO", id: 2, }; const reducer = function (state = [], action) { switch (action.type) { case "ADD_TODO": state.push(action.payload); // return [...state, action.payload]; return state; case "REMOVE_TODO": return state.filter((todo) => todo.id !== action.id); case "TOGGLE_TODO": return state.map((todo) => todo.id !== action.id ? todo : Object.assign({}, todo, { complete: !todo.complete, }) ); default: return state; } }; const createStore = function (reducer) { let state; let listeners = []; const subscribe = function (listener) { listeners.push(listener); return () => { return listeners.filter((l) => l !== listener); }; }; const dispatch = function (action) { state = reducer(state, action); listeners.forEach((listener) => listener()); }; const getState = () => state; return { dispatch, getState, subscribe, }; }; const { subscribe, getState, dispatch } = createStore(reducer); subscribe(() => { console.log("State was changed : ", getState()); }); dispatch(addTodo1); dispatch(addTodo2); dispatch(addTodo3); dispatch(removeTodo1); dispatch(toggleTodo);Si está escribiendo a mano un reductor, no, no puede simplemente .push() - ¡eso mutará el estado existente!
Nunca debes mutar el estado cuando usas Redux:
https://redux.js.org/guia-de-estilo/#do-not-mutate-state
Dicho esto...
si usa nuestro paquete oficial Redux Toolkit y su función createSlice para escribir sus reductores, puede escribir la sintaxis "mutante" y funcionará de manera segura.
Redux Toolkit usa una biblioteca llamada Immer en el interior, que le permite escribir sintaxis "mutante" pero la convierte automáticamente en actualizaciones inmutables seguras:
Con RTK, un reductor de rebanadas típico podría verse así:
import { createSlice } from '@reduxjs/toolkit' const todosSlice = createSlice({ name: 'todos', initialState: [], reducers: { todoAdded(state, action) { state.push({ id: action.payload.id, text: action.payload.text, completed: false }) }, todoToggled(state, action) { const todo = state.find(todo => todo.id === action.payload) todo.completed = !todo.completed } } }) export const { todoAdded, todoToggled } = todosSlice.actions export default todosSlice.reducerEntonces, cambie a usar Redux Toolkit: ¡simplificará drásticamente el código y lo hará más seguro!
(también: como nota al margen, parece que está tratando de escribir su propia función createStore Redux, ¿alguna razón en particular por la que está tratando de hacer eso?)