State management for React applications can often be confusing. On a smaller scale, it is more manageable with things like React’s Context API but for medium and large scale applications, a more robust and organized system is necessary. This is where Redux comes in.
Redux is a predictable state container for Javascript apps. It helps you manage application state in a single immutable state tree. Actions are dispatched to update the state, and components can subscribe to changes in the state. Let’s overview some important Redux terms.
Store: Redux manages the state in a single store. React components can subscribe to the store to receive updates when the state changes.
Actions: Actions are plain JavaScript objects that represent an intention to change the state. They are typically dispatched using store.dispatch(action).
Reducers: Reducers specify how the application’s state changes in response to actions. They are pure functions that take the current state and an action and return a new state.
Selectors: Selectors are functions that extract specific pieces of state from the redux store state.
React-Redux provides bindings to connect Redux with React components. It simplifies the process of passing down state and dispatching actions to components that need them. This accomplishes a few other things as well. First, it helps reduce the clutter in your components and makes them more readable for others. Second, it creates more reusable code through the use of actions. These actions can be called upon in any component that needs them. Take the code below as an example.
This is a simple employee login action which takes credentials entered in by the employee and makes a post fetch request to the backend. It will then dispatch the setEmployee reducer, updating the state, pictured below.
In this picture, a state is created called “employee” as an object with several key/value pairs. Employee, presumably where information about the employee is stored, error to help with any error handling, and isLoggedIn to help with some conditional rendering. The beauty of Redux is that you can include so many different things here in this initialState object, really whatever your code needs to keep track of! From here we move down to the reducers which are state update options that are called upon by your actions. In the action pictured above, it dispatches the setEmployee reducer which does a couple of things. First, it assigns to the employee whatever the “action.payload” is. In this instance, employee is passed into setEmployee which was assigned the “response.json()” from the fetch request and eventually becomes the payload. Second, error remains as null (if error needs to be handled, an action can call the setError). Lastly, it changes isLoggedIn to true which can be used to help conditionally render different aspects of your app. All of this is stored in a file called “EmployeeSlice.js” which is imported into “Index.js”, also sometimes conventionally named “Store.js”. Here, the Redux store is configured and the reducer is assigned to a key like so.
Easy enough. Lastly, wherever your ReactDOM is rendering, you would import the Redux store and wrap it around your app pictured below.
Wrapping it around your app and passing in “store” allows any of your components in your app to access the store and thus, all of what you’ve created in your slice! After creating your components and now needing to actually call any of your actions, one would need to import “useDispatch” from react-redux and whatever slice you need from the appropriate file. The logic in this app for the employee login in the component looks like this.
All but one of the terms were covered above. Selectors are pretty simple to grasp but I will still include an example below. Here, I have imported useSelector from react-redux and then used it to assign a value to both user and employee.
Prior to having Redux in my app, all of my fetch requests and state changes were managed in the components themselves or passed down from parent components. This was great but sometimes made tracking them convoluted and easily led to errors. In an app as small as this, Redux can actually end up adding more code to your project than there would be with useContext. But, the benefit of Redux shows once the app starts scaling and allows for seamless global state management by maintaining a clear separation of concerns. Having this single source of truth for the application state makes it easier to debug and understand how the data is changing over time. There are also additional tools like Redux DevTools which allow you to inspect every action, state change, replay actions, and track performance. Top companies such as Instagram, Amazon, and Robinhood reportedly use Redux in their tech stacks encouraging a large community and app ecosystem which produces many plugins, middleware, and extensions, allowing for a more customizable fit of Redux.
Top comments (0)