Implementing React redux
React Redux implementation tutorial, using it as a global state manager with Hooks
By Antônio Gally, React Frontend developer at Looqbox — BI Platform
Hello there! I did a small tutorial to implement redux nowadays, using the best practices that we have, making it simple and organized. After we configure our redux, I'll show you how to use it with hooks that redux provides to us. Let me know if you liked! Thanks for being here :D
Implementing Redux
Starting from scratch, I'll create a new project with:
yarn create react-app my-redux-app --template=typescriptWith the created project, we need to add our dependencies:
yarn add redux react-redux @reduxjs/toolkitDirectory tree
Then, we can start to create the structure. To do that we need to understand how redux works. In a simple way, redux need's actions, store and reducers. To explain all these tree guys, this article will help a lot. Knowing the prerequisites, we now have:
Redux types
With the right files, we can start to create the type of user state that we want to store on our redux. If we wanted to have another information about the user, we could add more objects inside userReducerType , for example a userMetaData
Redux actions
The actions are just a plain javaScript object that must have a type and a payload or data inside. We're just making it dynamic passing the user data through him as a function.
Redux reducer
To finish our user storage on redux, we need a reducer. The literal definition of a reducer is that he is a function that receives one state and one action. The state is our user storage data for example, and the action is the return of our user.actions itself. Inside of the reducer function, we can make changes in that state according to each type that we pass on our action object, like SET_USER_INFO.
Redux store
Now we have our user reducer running! The last thing to do is actually configure our store. Redux's store is complicated 😳, but all we need to know (now) is that redux need to assemble all the reducers of our application and apply them all into a store that will exist outside of our components, like a guard watching everything from outside. This gif will illustrate better:
Using Redux
With our store working well, we just need to wrap up on some part of our react app. Mostly, we put on index.tsx
😎 Yes, we have a up and running redux on our app, if you have the Redux dev tools extension on your chrome, you'll see the redux structure like this:
How to use
All right, but how can we use this beauty 🤔. With useSelector and useDispatch of course! In older eras of redux, we had a guy called connect, mapStateToProps, mapDispatchToProps and stuff, but nowadays we have hooks, and hooks are great so let's use it 🤟
Summary
Final words
I presented here a small tutorial to show you how we can configure our react-redux state manager keeping it organized and scalable. After the configuration is ready, we saw how to use two of five hooks that Redux have, using them to manipulate the data that we want inside of our store. Thanks a lot for read this medium post! Hope see you in many others :D
