When to use it and why it’s important.
Has anyone ever told you that you should implement Redux in your React application? Well today, I’ll be discussing the importance of Redux and how you can use it in your next project!
Let’s talk more about a real-life situation in which redux can help us on the job of maintaining/managing a wide-scale application. Let’s say you are maintaining this application and all of a sudden a bug occurs and at this point, you do not have redux on the application. It’s your job to find the root cause of the bug but you feel overwhelmed because you have 50+ components to look through to find the source of the bug. Now, you will already begin to go through each component and their local state to determine what went wrong which will be time-consuming and cause your application to be out of service for longer than need be. With redux, since you are managing a global state, you are able to find the bug much quicker than if you were to look through 50+ components since all you have to look at is what the current global state is. This will not only save you time but it will also save your company money. So let’s get into implementing redux in our application!
How To Implement Redux
A more detailed instructions for installation and use is documented here, however, I will be breaking it down for you!
- Using create react app:
npx create-react-app my-app-name — template redux
- An existing react app:
npm install react-redux
- We would need to import a Provider component from react-redux and wrap our App component within here.
- We need the Provider component because it makes the redux store (global state) available to our application.
- We would also need to import
createStorefrom redux in order to create the global state for the application.
How To Give Application Access To Store
Wrapping our App component within the Provider component typically in
index.js and then we can access the redux store by connecting from react-redux. In components, in order to have access to the functions provided by react-redux, we must import it at the top of our component. Then, through
connect() from react-redux, we have access to the store through
mapStateToProps and then the state will then be able to be accessed by the component through props. If we needed to update the store, we would need to use
mapDispatchToProps given by the react-redux library. Through this, it would allow us to dispatch an action to our reducer and the payload of the passed action will determine how the reducer will update the store.
dispatch() is also given by the react-redux library that allows us to send an action that contains some “instructions” to our reducer that determines how we will update our state. To get more information on how these two functions work, feel free to read this amazing blog post I found here! Since redux is relatively new at this point for you, I will not be going into thunk middleware (which is provided by installing the redux-thunk library) just yet but do note that this middleware is needed to allow you to appropriately make asynchronous calls to your backend.
Now that you have some of the basic knowledge of redux and how to implement it into your own react application, give it a try! In the next couple of blog posts, I will be going more in depth about how to utilize redux with a backend, but for now, just practice the flow of mapDispatchToProps -> dispatch(action) -> reducer -> updated store. Once you have a hang of this, understanding how to effectively fetch data to and from your backend will be a lot easier to grasp. For now, happy coding and please feel free to message me with any questions!