[React-Redux] react-redux

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

 

1. react-redux

The react-redux package is the official way to bind React components to the Redux state.

You can bind Redux to any UI components but you do not reinvent the logic again if there is a good library for us to use.

 

2. 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 Redux state, dispatch Redux actions, and pass data to presentational components through props. Meanwhile, a presentational component only gets data as props and invoke callbacks on props.

 

3. Provider Component

The first step is 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 you top-level react component.

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

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

 

4. connect()

The connect() function literally connects a React component to a Redux store.

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);

 

5. mapStateToProps

The “mapStateToProps()” function defines which state should be exposed as props.

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
  };
};

 

6. mapDispatchToProps

The “mapDispatchToProps()” function defines which actions should be exposed as props.

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 mapDispatchToProps() to connect(), the “dispatch()” function is exposed as a prop (this.props.dispatch).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s