[Redux] react-redux

Redux is good at state management, and React is for creating UI components. You can connect React and Redux manually, but there is a great tool that makes the task in a simple way. It is the “react-redux” package.

The “react-redux” creates the “Provider” component and the “connect” function.

React Components and Redux

You need to make sure your React component is a container or a presentation component.

Only a container is aware of Redux. A container subscribes to the Redux state, dispatches Redux actions, and passes data to functional (presentational) components through props. Meanwhile, a functional component only gets data as props and invokes callbacks on props.

Provider Component

The first step is to make that the app is aware of the Store. It is done through the “Provider” component.

• Create the Redux “Store” and pass it to the Provider component, which wraps the top-level react component.

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';

const reducers = combineReducers({
  ...
});
const store = createStore(reducers);

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

connect()

The “connect()” function connects a React component to a Redux store by providing the mechanism to communicate with the Provider.

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

• The “connect()” function returns a function that takes a React component as a parameter. So you can use it like this:

import { connect } from 'react-redux;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

mapStateToProps

The “mapStateToProps()” function defines which state should be exposed as props. The function gets up to 2 parameters (state, ownProps?)

• Whenever a Redux “Store” is updated, the “mapStateToProps()” function is called. The function returns an object that will be merged as props to a React component. 

const mapStateToProps = (state, ownProps) => {
  return {
    propData: state.data
  };
};

mapDispatchToProps

The “mapDispatchToProps” may either be an object, a function or not supplied. 

• The “mapDispatchToProps” defines which actions should be exposed as props.
• When you define a “mapDispatchToProps” as a function, it can have up to 2 parameters. (dispatch, ownProps?)
• The “mapDispatchToProps” can be an object when each field of the object is an action creator function -> shortcut syntax, the “dispatch()” function is called automatically.

We can manually wrap actions in the “mapDispatchToProps()” function.

const action1 = () => {
  type: 'Action 1',
  data: 1
}; 

const action2 = () => {
  type: 'Action 2',
  data: 2
}; 

const mapDispatchToProps = (dispatch) => {
  return {
    action1: () => dispatch(action1()),
    action2: () => dispatch(action2())
  }
}

Another way (you will use this in most cases) is to use the “bindActionCreators()” function.

const actions = {
  action1: () => {...},
  action2: () => {...},
};

const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(actions, dispatch)
  };
}

Note. If you do not provide the “mapDispatchToProps()” to “connect()“, the “dispatch()” function is exposed as a prop (this.props.dispatch).