"react-redux" and "@reduxjs/toolkit" short explanation
Tags: react, redux, javascript, tutorial
Published: 2023-04-25 16:47:18

## 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**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8v3ztmdwmxc4l04bggat.png)

Here is how it would look like the store

**reducers.js**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7tpev5bkymaypttvaaf.png)


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

**actions.js**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arjklki1icw498x6aqkn.png)

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

**index.js**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kufyg0rhh3ragfsqqtj3.png)

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**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmjqmy76d5z4higjv6bj.png)

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


## React-Toolkit example


**store.js**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lr096u0mu6322u0ru58d.png)

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

**reducer.js**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqqjvc7hnfw8xl048ibc.png)

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**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/if9i58l4e0ivay7bnaqx.png)

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

**Counter.js**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8av8qm73yr6os1j49st.png)

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](https://github.com/lausuarez02/ReduxStoresTutorial) code for this so you can check it out.

Cheers, Lautaro