Question

我有这部分代码：

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是一个Action。它的代码是：

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中发送我的动作？

Answer 1

mapDispatchToProps的目的不是直接实际调度操作。

mapDispatchToProps用于将动作创建者绑定到dispatch，并将这些新绑定函数作为props传递给组件。

使用mapDispatchToProps的主要好处是它通过从组件中抽象出商店的调度方法来使代码更清晰。因此，我们可以调用不具有调度功能的函数的道具，如此

this.props.onTodoClick(id);

然而，如果我们不使用mapDispatchToProps，那么我们必须单独将调度传递给组件并调度操作，如下所示：

this.props.dispatch(toggleTodo(id));

您将使用mapDispatchToProps，如示例代码中所示，然后在其他地方写：

mapDispatchToProps必须是纯函数，不能有副作用。

从函数内部调度操作将被视为副作用。当函数的求值改变自身之外的状态（改变应用程序的全局状态）时，函数具有一个或多个“副作用”

使用生命周期挂钩来调度操作以响应组件上的prop更改：

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

  // ...

}

带事件的MapDispatchToPros

1 个答案: