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