Redux 带有事件的MapDispatchToPros

Redux 带有事件的MapDispatchToPros,redux,action,stateless,Redux,Action,Stateless,我有这部分代码: constructor(props) { super(props) this.state = { symbol: '', side: '', status: '' }; this.onInputChange = this.onInputChange.bind(this); this.onValueChangeSide = this.onValueChangeSide.

我有这部分代码:

constructor(props) {
      super(props)

      this.state = {
        symbol: '',
        side: '',
        status: ''
      };

      this.onInputChange = this.onInputChange.bind(this);
      this.onValueChangeSide = this.onValueChangeSide.bind(this);
      this.onValueChangeStatus = this.onValueChangeStatus.bind(this);
      this.onFormSelect = this.onFormSelect.bind(this);
  }

    onInputChange(event) {
        this.setState({ symbol: event.target.value });
      }

      onValueChangeSide(event) {
        this.setState({ side: event.target.value});
      }

      onValueChangeStatus(event) {
        this.setState({ status: event.target.value});
      }

      onFormSelect(event) {
        this.props.requestAccountsFilter(this.state.symbol, this.state.side, 

this.state.status);
  }
requestAccountsFilter是一个操作。其代码为:

export function requestAccountsFilter(symbol, side, status) {
  return {
    type: ACCOUNT_FILTERS,
    payload: {
      symbol,
      side,
      status
    }
  };
}
这种方法很有效

此外,我想使我的组件无状态,所以我创建了一个容器。我的问题是,我不知道如何使用上述功能分派我的操作。 我这样写:

const MapDispatchToProps = dispatch => (
  {
    requestAccountsFilter: (symbol, side, status) => {
      dispatch(requestAccountsFilter(symbol, side, status));
    }
  }
);
但它不起作用。
如何在MapDispatchToProps中分派我的操作???

MapDispatchToProps的目的不是直接分派操作。

mapDispatchToProps用于将动作创建者与dispatch绑定,并将这些新绑定的函数作为道具传递给组件

使用mapDispatchToProps的主要好处是,通过从组件中抽象出存储区的分派方法,使代码更干净。因此,我们可以调用道具,这些道具是没有访问权限的函数

this.props.onTodoClick(id);
然而,如果我们不使用mapDispatchToProps,那么我们必须将分派单独传递给组件并分派操作,如下所示:

this.props.dispatch(toggleTodo(id));
您可以使用示例代码中所示的mapDispatchToProps,然后在其他地方编写:

mapDispatchToProps必须是纯功能,不能有副作用。

从函数内部调度操作将被视为副作用。当函数的评估在其自身之外改变状态(改变应用程序的全局状态)时,函数有一个或多个“副作用”

而是使用生命周期挂钩来调度操作,以响应组件上的道具更改:

class exampleComponent extends Component {
  componentDidMount() {
    this.props.fetchData(this.props.id)
  }

  componentDidUpdate(prevProps) {
    if (prevProps.id !== this.props.id) {
      this.props.fetchData(this.props.id)
    }
  }

  // ...

}