在Redux的mapDispatchToProps中处理组件状态或Props的问题

嘿，作为React/Redux新手，能想到用mapDispatchToProps来优化action触发方式真的很棒！我来一步步给你讲清楚怎么在这里处理组件的props和状态~

首先，先回顾下你当前的写法：你只传了mapStateToProps给connect，这时候Redux会自动把dispatch函数注入到组件的props里，所以你能直接调用this.props.dispatch()。但mapDispatchToProps的作用就是帮你把action creator和dispatch绑定起来，让组件代码更简洁，也更易维护。

1. 用mapDispatchToProps处理组件Props #

mapDispatchToProps有两种写法：对象形式和函数形式。如果需要用到组件自身的props，就得用函数形式——它的第二个参数ownProps就是组件接收的所有props。

举个例子，假设你有一个action creator：

// actions.js
export const setSearchType = (searchType) => ({
  type: 'SET_SEARCH_TYPE',
  payload: searchType
});

然后在组件里这样写mapDispatchToProps：

import { setSearchType } from './actions';

const mapStateToProps = (state) => ({
  searchType: state.searchType
});

// 函数式mapDispatchToProps，dispatch是第一个参数，ownProps是组件的props
const mapDispatchToProps = (dispatch, ownProps) => ({
  // 比如用props里的默认值来触发action
  setDefaultSearchType: () => {
    dispatch(setSearchType(ownProps.defaultSearchType));
  },
  // 定义一个接受参数的方法，方便组件传值
  updateSearchType: (newType) => {
    dispatch(setSearchType(newType));
  }
});

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

这样一来，组件里就可以直接调用this.props.setDefaultSearchType()或者this.props.updateSearchType(xxx)，不用再手动写dispatch了。

2. 处理组件内部的State #

这里要注意：mapDispatchToProps是在组件和Redux store建立连接的时候就生成的，它不会随着组件内部state的变化而重新计算，所以没法直接在mapDispatchToProps里拿到组件的state。

那怎么用组件state来触发action呢？很简单，在组件的事件处理函数（比如你的handleOptionChange）里先获取state的值，再传给mapDispatchToProps里定义的方法就行：

handleOptionChange(changeEvent) {
  const selectedType = changeEvent.target.value;
  // 先更新组件state（如果需要的话）
  this.setState({ select: selectedType }, () => {
    // 用更新后的state触发Redux action
    this.props.updateSearchType(this.state.select);
  });
  
  // 其实如果不需要依赖组件state的后续操作，直接用选中的值也可以
  // this.props.updateSearchType(selectedType);
}

3. 简化写法：对象形式的mapDispatchToProps #

如果你的action creator不需要用到组件的props或state，直接用对象形式就好，Redux会自动帮你把每个action creator绑定到dispatch：

const mapDispatchToProps = {
  setSearchType
};

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

这时候组件里直接调用this.props.setSearchType(newType)就相当于调用dispatch(setSearchType(newType))，非常简洁。

总结一下 #

• 要用到组件props：用函数式mapDispatchToProps，通过第二个参数ownProps获取
• 要用到组件state：在组件的事件处理函数里先拿到state值，再传给mapDispatchToProps里的方法
• 尽量用mapDispatchToProps封装action触发逻辑，避免在组件里直接写dispatch({...})，让代码更清晰

内容的提问来源于stack exchange，提问作者Yu Chen