Redux and Redux Toolkit implementation 🌐
Many times we wonder what would be the best option for a state manager in React or React Native, even Nextjs.
I always had that question until I got to know Redux and Redux Toolkit.
The first thing we have to know is that Redux is a tool to manage Accessible Global states at any point of our components regardless of whether it is a parent or child.
On the other hand, Redux Toolkit improves Redux itself by allowing us to create state layers, they also allow us to handle asynchronous functions in the best possible way and with great ease.
- Once we know this, we start creating an example with React, with the command:
2. We will navigate to our project with cd my project name.
3. We install the following dependencies.
4. We enter src and delete what we do not need, we will keep App.js and index.js.
App.js like:
index.js like:
5. Now inside the src directory, we will create a folder called store that will have an index.js file inside.
6. In the index.js we configure our store for which we will use Redux Toolkit.
7. The next thing will be to create our reducer or slice to create a state manager for the users, inside the store folder we will create a folder called slices which inside will have a file called users.js.
npm install axios
users.js like:
8. Now we import our reducer into our store.
9. We already have our store complete with its reducer, it is time to implement it in the application, in index.js we will wrap our App function to have the global state manager.
10. Finally we have to execute your function “get_all_users” that updates the status of our users.
11. Your google console like:
If you liked me, could you help me with a like that would help me a lot 🙏.
