Easy Steps to Set up and use Redux with a React app

Redux is a great way to keep all your data in a central state which can be access throughout any components or containers you make within your React app. Gone are the days of passing down data from one component to the next through use of individual state and passing of props to children components.

In this simple setup we will use npm to install dependencies, but you could alternatively use yarn which works just as well.

2. Then enter the correct directory with cd your-project-nameand start the program with npm start. This should show you the default React page with its icon, if this is not showing then you’ll need to troubleshoot to get the build to work.

3. Now we will install redux, react-redux, and redux-thunk. Redux sets up a central store, and Thunk is a middleware which will allow us to perform actions to change the state and get the state. The command is npm install redux react-redux redux-thunk — save

4. Let’s create our first action! For example, if we wanted a deck method which would let us set a user’s deck, such as in any card game we could implement a set deck Action. An action will be processed by the reducer and accordingly change the central store. Here would be my method for a set deck action.

5. Now let us create a Reducer. A reducer reads incoming actions and responds by changing our store. A reducer typically is a switch statement that will take in the action’s type, read it, then change the store with the payload. Each reducer can have its own initialState as well, I created the variables I wanted to incorporate into my store in the initialState. Here is an example of a reducer.

6. To make sure all of our reducers are being used we can make use of a root reducer, this combines all the other reducers into one which can be used by the store whenever an action is dispatched. You will need to import combineReducers from redux and each of the reducers you are using, then call it like so:

7. Finally, in src/index.js you should see your App being called, we now want to wrap the entire app in the Redux store so each component can access said store.

Great! Now Redux is set up, if you run your application again you can open your developer tools and see the console.log of your store. Whats next?

TIP: Instantiate separate Action/Reducer files for each model you use. I like to use the naming convention of the model.action.js and model.reducer.js. Having all these filed correctly will help you remember where to change actions later!

Redux provides a way to cleanly get our state within a component and also dispatch actions to change the store. We will use the “connect” function from redux to map both of these to props our components can use. Connect can take up to 4 arguments connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?). You can set any of them to null if you’re not using them in the current component.

Import connect by import { connect } from ‘react-redux’ at the top of the component you need it in, then in the export of your component use this export default connect(mapStateToProps, mapDispatchToProps)(yourComponentName). Remember if you do not need one of them, you can set the value to null.

Lets talk about the two that we need to use today:

2. mapDispatchToProps: This allows us to dispatch actions we previously defined to change the store through our reducers. We first MUST import setDeck from the action file we created earlier, then we can call dispatch (key word to set forth an action) and create a shortened method call (instead of dispatch(setDeck(userDeck)) every time we need it in this component we can now do setDeck(userDeck). Call this method by this.props.setDeck(userDeck)

And I believe that is the simplest way to get started with Redux! Have fun and hopefully save some time and gain clarity to your code without having to pass down multiple items to every component!

Related posts:

The South Fulton Arrow Youth Council, in partnership with the Atlanta Hawks and the WNBA Atlanta Dream, is calling on all schools, communities and youth organizations to gather at Philips Arena…