In the previous article I walked through some React fundamentals, I talked about “State” and “Props” and how they hold information that affects the components, but as each component is isolated, we cannot just access that information from a different component. Then a very important question pops up, how to share information that belongs to a component with other components? and React-Redux comes up to answer that question.
In this article we are going to talk pretty much about React-Redux and how easy is to get it to work with React.
React-Redux
Redux is a state container for JavaScript applications and React-Redux is the official React bindings for Redux.
The Redux store is the place where the data of our application is stored and React-redux allows React components read and update data from it.
As React Redux was designed to work with React’s component model, get it to work is easy. On the other hand, it is already optimized because some complex performance optimizations are automatically implemented. A React component is re-render only when the data it needs changes.
Making the Redux store available for the application
Bellow I am going show some basic steps for connecting React to a Redux store.
- Install “React Redux”. so, we can import it in our application.
- Install “Redux”. so, we can import it in our application.
- Import the “Provider” from React Redux. In order to be able to render it later.
- Create a reducer which is a function that describes how the state changes in response to an action. For this example, we are going to call it “rootReducer”
- Import the “createStore” from redux, which is going to allow us to create the store and import our “rootReducer” where is some logic to respond to an action.
- Create the store, which is the place where the data of the application is going to be stored. Passing our “rooReducer” as a parameter.
- Render the Provider. Usually most applications render a <Provider>at the top level in order to make the Redux store available to any nested components.
by executing these basic steps, the React application is ready for using the Redux Store, meaning that the application can read and update information in the store, but it is not completely done yet, because still there are some other steps to be executed. Until now the store is available for the application, but this is all.
Connecting components with the store and mapping state to props
Once the Redux store is available for the application there are a few things to do for getting a component to be updated automatically when the store changes, because after all this is one of the most important and powerful feature of React-redux, which is to re-render automatically the components when the data they need changes.
One of the things to do is to connect the component to the Store, This is done by using a function called “connect”, the name itself pretty much says what it does, which is just connecting the component to the store and allowing it to read and update data from it.
But just connecting them is not enough because still we need to map the state to the component properties, and this mapping is done by creating a function within the component, this function must be name “mapStateToProps” and it is going to be called from the redux store every time the state changes. For instance, let’s say we have a name and gender stored in the store and when any of those elements in the store changes we want to re-render a component, so we map those elements in the store to the corresponding properties in the component.
Summary
To recap, I must confess that a few years ago I tried to start with React but by then I really couldn’t dive in depth, maybe because sometimes when we don’t have like a serious goal or purpose we just don’t put a lot of effort and give up easily at the first sign of troubles, so when I was given this new assignment it was the perfect reason to start to play with React.
I really found very interesting and very powerful how React works and the way how React-redux plays along with it, it is just great.
To summarize I just would like to highlight some points:
- The fact of being based on components gives a lot of power by allowing you to reuse them in a very efficient way and because they are encapsulated and isolated from each other that gives a lot of control and reduces the room for some mistakes.
- The “single-way data flow” principle just makes super clear how to deal with the data and events between the different components related to each other. “Properties flow down; actions flow up” is simple but powerful.
- “JSX” which allows you to use XML/HTML with JavaScript in a very handy and convenient way. JSX adds up a lot of flexibility and possibilities at the moment of creating React components.
- The “create react-app” command makes very easy your live by taking care of setting up and configuring a React application, which otherwise would take a lot of effort and time.
- Nowadays on internet we can find a lot of components ready to use, code examples and tutorials.
- React Redux, it works just perfectly with React, of course it is the official react bindings for redux, therefore we would not expect something different, right?
The way how React Redux is structured makes clear to work with it and we just have to execute some basic easy steps, and everything is going to work nicely.
