是否可以在执行异步操作的类中保留 redux 调度功能？答案

【问题标题】：is it possible to keep redux dispatch function in class performing async actions?是否可以在执行异步操作的类中保留 redux 调度功能？
【发布时间】：2021-03-10 21:40:36
【问题描述】：

我是 Redux 的初学者，我想将它用于异步逻辑。 Redux 风格 quide recommends 使用 redux-thunk ，但如果我按照以下方式使用 redux，我似乎不需要它：

class Actions {
  constructor(dispatch) {
    this.dispatch = dispatch;
  }

  someSyncAction1(data) {
    this.dispatch({
      type: SOME_SYNC_ACTION1,
      payload: data,
    })
  }

  someSyncAction2(data) {
    this.dispatch({
      type: SOME_SYNC_ACTION2,
      payload: data,
    })
  }
  
  async someAsyncAction(data1, data2) {
    this.someSyncAction1(data1);
    await somethingAsync();
    this.someSyncAction2(data2);
  }
}

// then in my react component:
function MyComponent() {
  const dispatch = useDispatch();
  const actions = new Actions(dispatch);
  
  //...
  return <div onClick={() => actions.someAsyncAction(1, 2)}></div>;
}

这似乎是一种简单的方法，但我担心它是否会导致错误。请帮助我了解它有什么问题。

【问题讨论】：

标签： redux react-redux redux-thunk

【解决方案1】：

这与Hooks documentation 中提到的useActions 挂钩并没有太大区别——至少对于同步的东西来说是这样。

在异步的东西中，您正在失去功能：Thunks 可以在任何给定时间通过调用 getState 访问当前状态。

此外，这可能更重要：thunk 不仅是推荐的，而且是几乎每个 redux 开发人员都知道的模式。因此，他们查看您的代码并可以立即开始工作。另一方面，您的模式尚未建立，因此如果其他人接管您的代码会导致冲突 - 没有任何实际好处。

【讨论】：