React with Redux?? Easy! - #explianLikeIm5

#react #redux #webdev #beginners

(Originally published at olenadrugalya.blog)
In my previous article about Redux - #explianMeLikeIm5 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.

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.

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:

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:

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:

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:

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: