Different ways of state management in a react app

I was always confused by the various techniques of state management. so, I have decided to build an app using different state management techniques. I hope it will be easier for beginners to compare among those techniques and they will get a basic overview of them.

I build a todo list app using react-context-api, react-redux and redux-toolkit(recommended by redux)

React-Context-Api

React-Redux

Redux-Toolkit

Probably, from now on, I will use redux-toolkit in my side projects because it reduces lots of boilerplate code and with the help of the library called immer, it is possible to mutate the state directly. immer will make the code immutable under the hood.

For example, in traditional redux reducer in order to add an item to an array we have to do this:

return [...state, { id: uuid(), task: payload, completed: false }];

But, by using redux-toolkit we can mutate the array directly like this:

state.push({ id: uuid(), task: action.payload, completed: false });