Sophisticated Connection to Redux State

"Simplicity is the ultimate sophistication" - Leonardo Da Vinci

A library react-redux 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