Question

单击高级运动搜索按钮时，我需要显示带有api值的抽屉。
但是现在当我将redux状态与组件状态映射时，出现错误。动作必须是普通对象。使用自定义中间件执行异步操作。
您能告诉我如何绘制状态吗？
以便将来我自己解决所有的redux问题。
在下面提供代码段和沙箱。
我所有的地图状态都在tab-demo.js中完成

getSportsPlayerHistory = values => {
    this.props.fetchHistorySportsDatafromURL();
  };

  toggleDrawer = (side, open) => () => {
    if (open === true) {
      this.getSportsPlayerHistory();
    }

    this.setState({
      [side]: open
    });
  };

  const mapDispatchToProps = dispatch => {
  return {
    onDeleteAllSPORTS: () => {
      // console.log("called");
      dispatch(deleteAllPosts());
    },
    addFavoriteSPORTSs: data => {
      dispatch(addFavoriteSPORTSs(data));
    },
    fetchHistorySportsDatafromURL: () => {
      dispatch(fetchHistorySportsDatafromURL());
    }
  };
};

Answer 1

动作需要返回普通对象，您的fetchHistorySportsDatafromURL动作返回一个函数。如果您使用历史记录减少器函数async，则可以使用异步函数来进行API调用那里并将结果返回状态。

API call in reducer

这可行，但不是理想的，因为您希望简化器成为纯函数，因为没有副作用，相同的输入总是会产生相同的输出

您还可以异步地在组件的回调处理程序中发出API请求，并将结果传递给分派的操作。

API call in component then dispatched in action

这是一个很好的解决方案，非常适合小型项目，但是将网络业务逻辑耦合到您的UI显示组件中，由于降低了代码的可重用性，因此也不理想。

如果您仍然希望将API逻辑与组件分开（这是一件好事），则redux-thunk是创建异步操作创建者的一种方式，这与原始代码的模式非常相似。

API call in action using redux-thunk

这是最理想的，因为它可以将业务逻辑与UI完全分离，这意味着您可以更改后端请求而无需触摸前端UI，并且其他组件现在也可以使用相同的操作。好的DRY校长。

不太确定要如何处理新状态，但这应该可以让您在mapStateToProps函数中处理该状态。

当我将redux状态与组件状态映射时，出现错误

1 个答案: