How To Connect React with Redux (The right way)

You will find hundreds of right (and wrong) ways of connecting React with Redux on the internet. Some will be too long, some will be too complex and most won’t make any sense or explain how the internal circuitry is working.

So, here’s my attempt at explaining the right way to pull off this trick.

Now, before we dive into the details, I’d like you to have some basic information on what Redux is and why should we use it with React.

Redux is a technology that helps you manage “states”.

Now, as we know — React, Angular, Vue or any other cutting edge front-end technology (used to make Single Page Applications) have something called as “components” which, in various combinations, make up a particular page. Some of these components have “states” and some are “stateless”. When a change occurs in the “state” of the component (which basically means, a new value has been passed to it or a new operation like addition or subtraction has returned a value that we need to now display), we need a way to display this new state.

State management (identifying changed states and displaying the new states) can be handled by React, but React was not built for that. React was built to simply give you reusable components to save time in development and to build Single Page Applications (SPAs) so that your user gets a feeling that no pages are being loaded and everything is part of the same page (almost like a mobile app). When you attempt to manage states using React, you end up with a lot of confusing code.

This is where Redux comes in. It is important to note that Redux is a stand alone technology and is more of an improvisation of flux (major difference being Redux is way more refined but calling APIs is significantly tougher here, but more on this on another article). Redux doesn’t need React (contrary to popular belief), it can work really well with Angular as well and as we already know, React definitely doesn’t “need” Redux, but it’s a great to have.

Below is a diagram of the familiar Redux structure.

Redux Structure (familiar)

The important things to note are the actions and store. If you don’t know what these are, I have different articles explaining all these different terms, this article assumes that you know what these are.

Now, the actions and the store are the two things we definitely need to connect to React. Before we can do that, we first need to install the react-redux package, which acts as a bridge between react and redux.

npm install react-redux --save

Please note — If you’re refactoring your React code to Redux, you will need to comment out all your state related code from React as that will now be handled by Redux. You also need to remove all your dispatch (actions code) as well.

The second thing to do is to import providers from react-redux in your app using the command below.

import {provider} from "react-redux";

Now you have to wrap your <app> with <provider> Provider basically provides the “store” from redux (as mentioned above, you need to connect store and actions). Use the code below.

render(
<Provider store={store}></App></Provider>
)

Here {store} will be the constant in your code where you may have combined your reducers, code below. (The article assumes you know the concept of reducers and combining reducers in the store, since it’s about the connection. If, however, you are not aware, please check my other articles on reducers)

const store = createStore (combineReducers({reducer1, reducer2}), {});

Now comes the meat of the article. You need to use two functions provided by react-redux.

1. mapStateToProps , (to help you define which properties of your state you need in which component) and,
2. mapDispatchToProps (to define which actions you want to dispatch here)

(code below is generic and you can simply change the names and insert name of your reducers and use the code)

const mapStateToProps = (state) => {
return {
one: state.reducer1,
two: state.reducer2
       };
};

To make this code even more reader friendly, we can do one more thing -

const store = createStore (combineReducers({one :reducer1, two :reducer2}), {});
const mapStateToProps = (state) => {
return {
one: state.one,
two: state.two
       };
};

What happened here? we have simply assigned aliases to the reducers. Now, we need to create the second function.

const mapDispatchToProps = (dispatch) => {
return {
   setName : (name) => {
   dispatch({
   type: "SET_NAME",
   payload: name;
          });
       }
     };

Here, you have basically set actions with payloads here. (Payloads are basically the values you pass to a store and the store dispatches actions, again, if you aren’t sure how to use these, please check my other articles).

Now, all that needs to be done is, connecting the two functions that we have just created with our app (or app.js file).

export default connect(mapStateToProps, mapDispatchToProps)(app);

And voila! your two technologies are connected together. All states, store and actions will be now be handled by Redux, and there is a central, manageable place to manage everything from.

Summary, here are the quick steps ->

1. Install react-redux
2. import providers and wrap your app in providers to connect to redux store
3. set properties using mapStateToProps
4. set actions using mapDispatchtoProps
5. Connect both functions to your app by using the connect (x,y)(app) command.

We at Myrl Tech build some really complex products for our clients. Follow me for more awesome content.

Follow Here