【redux进阶】 mapDispatchToProps ，mapStateToProps

在 React 应用中使用 Redux，mapDispatchToProps 和 mapStateToProps 是 React Redux 提供的两个连接函数，用于将 Redux 的状态和派发 action 的方法映射到 React 组件的 props 上。这两个函数分别用于处理组件需要从 Redux 中获取的状态和向 Redux 发送的 action。

1. mapStateToProps

mapStateToProps 用于将 Redux 的状态映射到组件的 props 上。它接收 Redux 的状态作为参数，返回一个对象，这个对象的键值对将会成为组件的 props。

const mapStateToProps = (state) => {
  return {
    counter: state.counter,
    user: state.user,
  };
};

在这个例子中，mapStateToProps 将 Redux 的状态中的 counter 和 user 映射到组件的 props 上，这样在组件中就可以通过 this.props.counter 和 this.props.user 来访问这两个状态。

2. mapDispatchToProps

mapDispatchToProps 用于将派发 action 的方法映射到组件的 props 上。它接收 dispatch 函数作为参数，返回一个对象，这个对象的键值对将会成为组件的 props。

import { increment, decrement } from './actions';
 
const mapDispatchToProps = (dispatch) => {
  return {
    onIncrement: () => dispatch(increment()),
    onDecrement: () => dispatch(decrement()),
  };
};

在这个例子中，mapDispatchToProps 将 increment 和 decrement 这两个 action creators 映射到组件的 props 上，这样在组件中就可以通过 this.props.onIncrement 和 this.props.onDecrement 来派发这两个 action。

3. 使用 connect 函数连接组件

将 mapStateToProps 和 mapDispatchToProps 与组件连接的方式是使用 connect 函数。connect 接收这两个函数作为参数，并返回一个高阶组件，用于连接 React 组件与 Redux 的 store。

import { connect } from 'react-redux';
import { increment, decrement } from './actions';
import MyComponent from './MyComponent';
 
const mapStateToProps = (state) => {
  return {
    counter: state.counter,
    user: state.user,
  };
};
 
const mapDispatchToProps = (dispatch) => {
  return {
    onIncrement: () => dispatch(increment()),
    onDecrement: () => dispatch(decrement()),
  };
};
 
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

在这个例子中，MyComponent 通过 connect 函数与 Redux 进行连接，并通过 mapStateToProps 和 mapDispatchToProps 将相应的状态和 action 映射到组件的 props 上。

4. 使用对象形式的 mapDispatchToProps

如果 mapDispatchToProps 是一个对象，React Redux 会自动将对象中的每个值都当作 action creator，并使用 bindActionCreators 进行处理。

import { connect } from 'react-redux';
import * as actions from './actions';
import MyComponent from './MyComponent';
 
const mapDispatchToProps = {
  onIncrement: actions.increment,
  onDecrement: actions.decrement,
};
 
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

在这个例子中，mapDispatchToProps 是一个包含 action creators 的对象，React Redux 会自动将其处理为可以直接在组件中调用的函数。

5. 使用 connect 的第一个参数

connect 函数的第一个参数是 mapStateToProps，如果不需要在组件中访问 Redux 的状态，可以传入 null。

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

在这个例子中，组件只能通过 this.props.onIncrement 和 this.props.onDecrement 来派发 action，而无法通过 this.props.counter 和 this.props.user 来访问 Redux 的状态。

6. 完整的连接方式

最终的连接方式可能同时包含 mapStateToProps 和 mapDispatchToProps。

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

在这个例子中，组件可以通过 this.props.counter 和 this.props.user 来访问 Redux 的状态，并通过 this.props.onIncrement 和 this.props.onDecrement 来派发 action。

7. 总结

mapStateToProps 用于将 Redux 的状态映射到组件的 props 上，而 mapDispatchToProps 用于将派发 action 的方法映射到组件的 props 上。通过 connect 函数，我们可以方便地将 React 组件与 Redux 的 store 进行连接，实现状态的传递和派发 action 的操作。