javascript - React-Redux 最佳实践 - 从调度函数返回数据可以吗？

Question

我用谷歌搜索了一下，找不到任何与我的问题相关的明确信息，所以我想在这里问。

我对 React 和 Redux 还很陌生，所以对我要轻松一点。

假设我有这段代码。

  componentDidMount() {
    this.props
    .getUnitData(this.props.match.params.unit_code)
    .then(unit => this.setState({ unit, loading: false, success: true }))
    .catch(() => this.setState({ loading: false, success: false }));
  }

  //redux action
  export const getUnitData = unitCode => dispatch =>
    api.units.getUnitData(unitCode).then(unit => {
    dispatch(unitDataReceived(unit));
    return unit;
  });

是否可以在 Redux 操作中添加一条 return 语句来返回一个对象(在本例中为单位)并在 Promise 返回后对其进行 setState 操作？

或者我应该使用mapStateToProps，然后使用componentWillReceiveProps()来setState()？

显然第一种方式看起来简单很多。但与此同时，如果您不打算在其他组件中使用单元数据，那么这会让调度的整个目的变得多余，这显然感觉不对。

为清楚起见，使用第二种方法的示例。

  componentDidMount() {
    this.props
      .getUnitData(this.props.match.params.unit_code)
      .then(() => this.setState({ loading: false, success: true }))
      .catch(() => this.setState({ loading: false, success: false }));
  }

  //redux action
  export const getUnitData = unitCode => dispatch =>
      api.units.getUnitData(unitCode).then(unit => {
      dispatch(unitDataReceived(unit));
  });

  function mapStateToProps(state) {
    return {
      unit: state.unit
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.unit !== this.state.unit) {
      this.setState((unit: nextProps.unit));
    }
  }

Answer 1

这是我的拙见。您正在混淆逻辑，当有疑问时，我总是建议选择一种方法并在您的应用程序中坚持使用它(是的，可能有异常(exception))。

我想说的是，您的决定应该基于检索到的数据的使用位置。如果此类数据也应该在其他组件上可用，那么您最好不要在本地设置状态并更新存储。然后，您的组件将简单地“监听”商店该部分的更改并进行相应更新。仅仅为了操作而调度操作，然后使用本地状态有点令人困惑。如果您考虑 Flux 架构，您会发出一个不执行任何操作的事件，但实际上您正在更新本地状态。

另一方面，如果此行为很好地包含在该组件中，那么您根本不需要分派(dispatch)操作，只需处理组件中的所有内容即可。我会避免把事情搞混，因为这可能会令人困惑。将来你可以回到代码，也许检查 redux devtools 并注意到一个操作被调度，但存储永远不会更新，为什么呢？某处有错误吗？我没有从操作中将任何数据传回商店吗？我是否从调度的操作中读取了错误的字段？

一切都应该尽可能简单，要么:

调度操作 => 更新商店 => 基于新商店的组件更新

(还有更多内容，但我正在简化)。

我有时看到的一种模式是 thunks 返回 Promise 的模式。因此，您通常使用 thunk 并分派(dispatch)操作等，但您返回一个 Promise，以便您可以在分派(dispatch)异步操作后立即执行一些额外的逻辑。它有一些用例，但我现在不打算讨论太多细节。我希望这有助于澄清事情，但如果您有任何其他问题，请在评论中告诉我!