A Basic Redux Setup in React/React Native
Redux is a powerful state management tool that can be very useful as your React or React Native application grows and requires you to keep track of more state. How you want to set up Redux is up to you, but if you’re a beginner, it may be easiest to learn the flow of Redux with a step-by-step walkthrough. Here I’ve outlined a basic way to set up Redux to go along with this post and it will be the same for React and React Native.
Installation
Installation is fairly straightforward:
you can leave out redux-thunk if you don’t plan on using asynchronous actions. You can read more about Thunk in my blog post here.
Setup
To make things clearer, I will be basing my setup on my event application, where users create events that other users attend.
In the source folder, create a new directory called store (which will hold all of our Redux files) and within that create an actions directory and a reducers directory. Actions are the messages we pass and reducers are where we interpret those messages and alter state. Actions are just objects with a type and a payload.
Actions
In the actions folder, I’ve added two folders between the two major types of actions I’m concerned with —actions concerning events and actions concerning users. Therefore, I made two directories called events and users. Within each of these, I’ve broken actions up into two files — the action creators and the action types. Here’s an example of action types:
The action types are an unnecessary step if you only plan on having a couple of actions carried out. It becomes vastly more useful if you plan on building your application to house many different actions in order to be able to look, at a glance, what actions have already been created.
Next, we will edit the action creators (they create action objects). It should look something like this:
Notice that you’re importing the action types from the corresponding action type file. Then, you are defining functions that will return an action object (or a function in the case of an asynchronous action) with the type assigned to the corresponding action type. These dispatched action objects will be what the reducer receives to handle. Note that all actions need to at least have a type, but that the payload (which can be named whatever you like, as long as it is referenced properly in the reducer) is optional depending on if you need it or not. For example, a case where you don’t need a payload may be when clearing a current user, where you don’t necessarily need the current user’s id (or any other information) in order to achieve the action.
Then, you’ll make an index file in the main action directory in order to have a place to import from, where all the action creators can be accessed when referencing them in your application. It should look something like this:
Reducers
You can have as many reducer files as you want in the reducers folder, but in the end when we configure the store, you will combine reducers to one reducer (we will handle that later). For simplicity, we will have two reducers — the users reducer and the events reducer.
Within each of your reducers, you’ll add this basic layout:
Notice the action types that pertain to that reducer (events reducer in this case) are imported, we’ve set up the state that those actions will be applicable to, and we’ve create a switch statement (with a default state of the initial state we created) that handles each action based on the action type.
Store
Now we will create the store, which will hold the whole state tree of your application and bring everything together. In the main store directory, you will make a configureStore.js file. You can name the file anything you want, this is just a factory function that returns the store.
We will use combineReducer() to obviously, combine all reducers into one root reducer. Combine reducer takes in an object consisting of keys (which you can name anything you want) that reference each reducer you want to combine. When using Redux state in your application, you will access specific parts (or slices) of state (a specific reducer) using that key.
Thunk is a middleware which allows you to use asynchronous actions in Redux.
composeWithDevTools() is added to allow you to use Redux’s developer tools.
Connecting Application to Redux
Now, we just connect Redux to your React or React Native application. We need to make React aware of Redux in the app.js (or root component) file by wrapping the component in the Provider component from React-Redux. This allows all nested components to access the Redux store. Note that we assign the configureStore to the store property of the Provider Component.
Final Thoughts
If you think this is a lot of boilerplate code, you are absolutely right. Redux Toolkit is very helpful cutting down on a lot of this code, but it’s important to understand how each part of Redux functions before you pare it down. I will create a version of this setup that uses Redux Toolkit in a future blog post.
In my next blog post, I will address the final part of the Redux equation — being able to access and manipulate (dispatch actions to) Redux state from within your application.
