Sophisticated Connection to Redux State
Tags: react, redux, explainlikeimfive, javascript
Published: 2019-08-10 13:27:12

*"Simplicity is the ultimate sophistication"* - Leonardo Da Vinci

A library [react-redux](https://react-redux.js.org) couples React application with Redux state management.

The following higher order components are available to developer to take hold of: 

## `<Provider />`

    import {Provider} from 'react-redux'
    
    ReactDOM.render(
    <Provider store={store}>
    	<App />
    </Provider>
    document.getElementById('root')
    );

Every child component in the whole component tree stemming from `App` seed has an implicit access to the store. Hence, every component is able to dispatch actions and listen to updates in order to re-render. But not every component has to listen to updates. 

Underlying principles of this component are React ContextAPI and Provider pattern which I described in my previous posts.

## `connect`

There is a higher order component `connect`, passing redux store functionality dispatch and the state to the enhanced component.

    import { connect } from 'react-redux'
    function Component(props) { ...
    }
    const ConnectedComponent = connect(...)(Component);

This `connect` HOC can have up to four arguments as configuration:

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

Usually, you will only use two of them: `mapStateToProps()` and `mapDispatchToProps()`. I will be writing post about `mergeProps()` and `options` in near future.

**`mapStateToProps(state, [props]) => derivedProps`:** It is a function that can be passed to `connect` HOC. If it is passed, the input component of the connect HOC will subscribe to updates from the Redux store. Thus, it means that every time the store subscription notices an update, the mapStateToProps() will run. The `mapStateToProps()` function itself has two arguments in its function signature: the global state object and optionally the props from the parent component. The function return an object that is derived from the global state and optionally from the props from the parent component. The returned object will be merged into the remaining props that come as input in the connected component when it is used.

**`mapDispatchToProps(dispatch, [props])`**: It is a function (or object) that can be passed to the `connect` HOC. Whereas `mapStateToProps()` gives access to the global state, `mapDispatchToProps()` gives access to the dispatch method of the store. IT makes it possible to dispatch actions but passes down only plain functions that wire up the dispatching in a higher order function. After all, it makes it possible to pass funnctions down to the input component if the `connect` HOC to alter the state. Optionally, you can use the incoming props to wrap those into the dispatched action. 

That is a considerable chunk of knowledge to digest. Both functions, `mapStateToProps()` and `mapDispatchToProps()`, can be intimidating at the beginning. In addition, they are used in a foreign higher order component. However, they only give you access to the state and to the dispatch method of the store.

**Concept in sequence**

    View -> (mapDispatchToProps) -> Action -> Reducer(s) -> Store -> (mapStateToProps) -> View