React with Redux?? Easy!  -  #explianLikeIm5
Tags: react, redux, webdev, beginners
Published: 2020-08-18 07:49:25

(Originally published at [olenadrugalya.blog](https://olenadrugalya.blog))
In my previous article about [Redux - #explianMeLikeIm5](https://dev.to/olenadrugalya/explainlikeim5-redux-38nn) I tried to explain redux basics as easy as possible. This article continues Redux topic but tells about how to use Redux with React .

**React** is a JavaScript library which is used to create rich user interfaces. It consists of components, which might have changeable data - state. As application grow and more components being added, large amount of state could be difficult to handle. Here is where Redux comes. Typically, in a React Redux app, you create a single Redux store that manages the state of your entire app. Your React components subscribe to only the pieces of data in the store that are relevant to their role. Then, you dispatch actions directly from React components, which then trigger store updates.

*How to use Redux in React?*
You need to import `react-redux` package to your project first. It provides a way for you to pass Redux `state` and `dispatch` to your React components as `props`.
![RR_install](https://dev-to-uploads.s3.amazonaws.com/i/usa0un8w84wzn6m2cjr1.png) 

Now, enough theory, let's get to practice.
 
**GETTING STARTED**
Below we have a **class component** which has `constructor`, `state` and 2 methods. It renders `heading`, `input`, `button` and `list` of messages on the page. When the user types in some text, this text is being added to the **state input** (`handleChange()`). When the user press Submit button, the text is being added to the **state messages** and appears on the page (`submitMessage()`). Simple as that. 
![Simple_Class_Component](https://dev-to-uploads.s3.amazonaws.com/i/idwfue9ob5su0d420giv.png) 

**STEP 1**
Now we need to move the state and any logic connected to the state into Redux store. The only thing which your component will be doing is render DOM elements and messages on the page.
Here is our Redux store implementation:
![Redux_Store](https://dev-to-uploads.s3.amazonaws.com/i/fvmf62u0uukom8pxjrqy.png)

**STEP 2**
The next step is to provide React access to the Redux store and the actions it needs to dispatch updates. React Redux provides its `react-redux` package to help accomplish these tasks.
React Redux provides a small API with two key features: `Provider` and `connect`. 
The **Provider** is a wrapper component from React Redux. It allows to access the Redux store and dispatch functions throughout the component. It takes two props:
- the Redux store 
- your app 

Defining the Provider for an App component might look like this:
`<Provider store={store}>
  <App/>
</Provider>`

So, for our DisplayMessage component we can write Provider like this:
![Redux_Provider](https://dev-to-uploads.s3.amazonaws.com/i/wtin3sawck70zgfgv7k5.png)

**STEP 3**
In order **Provider** works correctly, we need to specify precisely what `state` and  `action` we want. This way we make sure that each component only has access to the state it needs. We accomplish this by creating two functions: 
- `mapStateToProps()` and 
- `mapDispatchToProps()`

**mapStateToProps()** does exactly what its name suggests: it connects a part of the Redux state to the props of a React component:
![mapStateToProps](https://dev-to-uploads.s3.amazonaws.com/i/ezz21nicbtkqf3erkt4t.png)

**mapDispatchToProps()** does something similar, but for actions - it connects Redux actions to React props. This way a connected React component will be able to send messages to the store:
![mapDispatchToProp](https://dev-to-uploads.s3.amazonaws.com/i/rq00h0sv60t3qodk6n3z.png)

This seems like a lot to do, but once you understand whats going on, it will surely became not that complicated :)

**STEP 4**
Now we have everything ready to connect our React component to Redux store. To handle this task we use method `connect` from react-redux. 

**Connect()** takes two optional arguments -  `mapStateToProps()` and `mapDispatchToProps()`. They are optional because you may have a component that only needs access to `state` but doesn't need to `dispatch` any `actions`, or vice versa. If you omit one of the functions, you put `null` instead as argument. 
So, to connect our DisplayMessage component to the Redux store, we write the `connect` method like this:
![Connect](https://dev-to-uploads.s3.amazonaws.com/i/c4sdc6b8uuvg13vwwkz2.png)

And we are done! Congratulations! Now you have learned React Redux :)

If you like to read my blog, you can [buy me coffee!](https://ko-fi.com/olenadrugalya) :)