Connecting Redux store with React app

In order to access and render the state properties, the React components need to connect to the Redux store.

We can write React components as:

1. Presentational components

2. Container components

Presentational Components: Presentational components are used to present the markup and styles.

Container Components: Container components are responsible for connecting to the Redux store.

• Container components are used to fetch the updated state from redux store. Once container components get the state from Redux store they pass the updated state to presentational components as props.

• Container components can be written by the developer by subscribing to the store using the store.subscribe() and the current state can be fetched from the store using store.getState() method.

• But React Redux has already implemented the necessary performance optimizations. Hence we generate container components using the methods provided by the react-redux library, rather than writing the container components by hand.

To generate container components the react-redux library provides connect() function

To use connect we need to define two functions

1. mapStateToProps

2. mapDispatchToProps

mapStateToProps: This function helps in transforming the current state present in the redux store as props and then the same is passed to its corresponding presentational component.

var mapStateToProps = function(state){
  return {
  CountPlus:state.inReducer.CountPlus,
    CountSub:state.deReducer.CountSub
  };
}

mapDispatchToProps: This function is used by container components to dispatch actions. The mapDispatchToProps() function accepts the dispatch() method as an argument and returns a callback. The callback returned from the mapDispatchToProps function can be injected into presentational components as props.

var mapDispatchToProps = function(dispatch){
  return {
    onIncrement:(step)=>{
      dispatch(CallIncrement(step))
    },
    onDecrement:(step)=>{
      dispatch(onDecrement(step))
    }
  }
}

The above 2 functions are passed as arguments to connect function

var App= connect(mapStateToProps,mapDispatchToProps)

Whenever the state is updated by the Reducer the mapStateToProps method in the component is executed, then the container component would fetch the updated state from the store and passed as props to the presentational components. Whenever props change the presentational component is re-rendered with the updated values.

---

Providing store access to app components :

We can pass the store as a prop to all the container components, but it is not a feasible solution if the number of container components are more in number and the store needs to be passed to the presentational components as well.

Hence react-redux provides an in-built component which provides access to the store to all the container components in an application. When rendering the root component to the DOM, the root component should be wrapped within the component as shown below.

ReactDOM.render(
  <Provider store={store}>
    <AppComp />
  </Provider>,
  document.getElementById('root')
)

• In case ,we have used react-router then the component should be wrapped within the components.