Is it possible to push data into state first and then return it by the push method, not spread or concat?

Question

In order to add data to the state, we cannot use the push method since it returns a number, not a newly created array. However, we can use the push method to add our data to the state and return it. Why is this approach flawed?

 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);

Answer 1

If you're hand-writing a reducer, no, you cannot just .push() - that will mutate the existing state!

You must never actually mutate state when using Redux:

https://redux.js.org/style-guide/#do-not-mutate-state

That said...

if you use our official Redux Toolkit package and its createSlice function to write your reducers, you can write "mutating" syntax and it will work safely!

Redux Toolkit uses a library called Immer inside, which lets you write "mutating" syntax but turns it into safe immutable updates automatically:

• https://redux.js.org/tutorials/fundamentals/part-8-modern-redux#immutable-updates-with-immer

With RTK, a typical slice reducer might look like:

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.reducer

So, please switch over to using Redux Toolkit - it will drastically simplify the code and make it safer!

(also: as a side note, it looks like you're trying to write your own Redux createStore function - any particular reason you're trying to do that?)