React Redux. Accessing state from the mapDispatchToProps () function

Hello! Today we will consider a solution, a rather popular problem - getting access to the state from the mapDispatchToProps () function of the react-redux application.

There is a typical container component (the ideology of react-redux components can be read here ), which is generated using the connect () function. The code is presented below (I publish a piece of code related to this topic):

const mapStateToProps = (state) => { return state.play; }; const mapDispatchToProps = (dispatch) => { return { togglePlay: () => { dispatch(togglePlay()); } } }; const ButtonPlayComponentContainer = connect( mapStateToProps, mapDispatchToProps )(ButtonPlayComponentView); 

Everything is simple, we define the mapStateToProps () function to read the state and mapDispatchToProps () to send the event. Next, we generate the component by passing the created functions to connect () .

In addition, I publish the code of the render () method of the component-view, for a clearer picture:

 render() { return( <div className="button-play" onClick={this.props.togglePlay}> <i className={ this.props.play == false ? "fa fa-play" : "fa fa-pause" }></i> </div> ); }; 

The usual situation, when you click on a button, changes state and depending on the state, the class of the element changes.

But now the task appears, when the state changes, to return this or that function. It seems to be not difficult, the problem is solved by one if , but there is one but . We do not have access to state in the mapDispatchToProps () method. With the fly, one option comes to mind at once - make a request to the repository using the getState () method and get the current state. But this option confused me with its stupidity . For the whole point disappears in the mapStateToProps function, which is already responsible for the state.

After reviewing the documentation for the connect () method ( this time carefully), I found the mergeProps parameter:

 connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]); 

Excerpt from the documentation for this parameter:

You may want to make it possible for a particular variable from the props.

If you translate literally, but it turns out that this function allows you to get the current state, or send events by binding our action to a variable from props (what mapDispatchToProps () does). Great, kill two birds with one stone.

A little googling, on the topic of implementing the method mergeProps , came across a question on github.

As a result, we get:

 const mapStateToProps = (state) => { return state.play; }; const mergeProps = (stateProps, dispatchProps) => { const { play } = stateProps; const { dispatch } = dispatchProps; const toggle = () => { dispatch(togglePlay()); if (play != true) { this.playAction(); } else { this.stopAction(); } }; return { play: play, togglePlay: () => { toggle(); } }; }; const ButtonPlayComponentContainer = connect( mapStateToProps, null, mergeProps )(ButtonPlayComponentView); 

Here, too, everything is simple, stateProps arrives in mergeProps , which contains the current state and dispatchProps , which allows you to send an event. Next, by code, we do a check on the state, the result of which will be the necessary function and return an object with the current state and an event that will safely fall into the props of our presentation component.

If you find any shortcomings, write, correct. Thanks for attention.