"react-redux" and "@reduxjs/toolkit" short explanation

Redux, what is it for?

Redux is commonly use for state management even though right now there is a lot of different options to choose across the internet, one of the most if not the most used library for state management in javaScript is redux.

react-redux

React redux is the official binding for react. It provides a way to connect your redux store with React components, enabling ways to dispatch actions and read data from the store using the 'connect' function. The twist about react-redux is that it does not come with a setup or configuration and it requires to write more boilerplate code compared to redux toolkit.

@reduxjs/toolkit

Redux toolkit compared to react redux is easy to use since it has a set of tools and utilities designed to simplify the Redux development experience. It comes with a preconfigured store, including middleware, reducers ,and actions ,which reduces the amount of boilerplate code you need to write.

React-Redux:

Pros:

• Provides a simple way to connect Redux with React components

• Lightweight and has no additional overhead

• Gives you a complete control over the setup and configuration of your store

• Compatible with the latest version of React.

Cons:

• Requires more boilerplate code compared to Redux toolkit

• May not be the best choice if you are new to Redux or want simplify your Redux development experience

@reduxjs/toolkit

Pros:

• Provides a simpler API and abstracts away much of the boilerplate code required for Redux.

• Includes a preconfigured Redux store with middleware, reducers, and actions.

• Encourages writing immutable code.

• Has features like the 'createSlice' function that simplifies the creation of Redux reducers

• Can help you write more efficient and error-free Redux code

Cons:

• Adds some additional overhead compared to React-Redux

• May not be suitable if you need complete control over the setup and configuration of your store

• Requires some additional learning if you are already familiar with Redux

Now, let`s see some examples of how to create a store for a react app with both of them

React-Redux example

store.js

Here is how it would look like the store

reducers.js

Now this would be the reducer where we give those methods to use in our app.

actions.js

Now these are the actions that we are going to call in our app.

index.js

This is our main file where we render all the app and where we use the 'Provider' to pass our data to all the app.

Counter.js

And finally this is how we dispatch our actions and how to get the data with the 'useSelector'.

React-Toolkit example

store.js

This would be our store on toolkit and you can see it has some differences but it is also really similiar.

reducer.js

This would be the reducer where we are using the createSlice to define the name, the state and the reducers that we will use in our app.

index.js

This would be our main file where as you can see is basically the same as the other one.

Counter.js

And finally is the component where we are dispatching and getting the data too, as you can see there is a minor difference where getting the data but just that.

Conclusion

Take in mind that this is a simple demonstration and you can deep in the difference redux tools within their official pages.

Thanks so much for reading and i really appreciate any comments or doubts that you might have about the post.

I am also leaving the github code for this so you can check it out.

Cheers, Lautaro