如何一个接一个地分派多个动作

IT技术 reactjs redux
2021-04-25 11:27:09

在我的 react/redux 应用程序中,我经常想要一个接一个地分派多个动作。

给出以下示例:成功登录后,我想存储用户数据,然后我想启动另一个从服务器加载应用程序配置的异步操作。

我知道我可以redux-thunk用来构建这样的动作创建器

function loginRequestSuccess(data) {
  return function(dispatch) {
    dispatch(saveUserData(data.user))
    dispatch(loadConfig())
  }
}

所以我的问题是:

  1. 当第一个dispatch返回时,所有侦听该操作的减速器是否已经更改了状态?我想知道这两个调度调用是否严格按顺序运行。
  2. 这种方法是否被认为是调度多个操作的最佳实践?如果没有,您有什么建议?

谢谢你的帮助!

3个回答

是的 redux-thunk 允许你按照你说的做,是的,这是调度多个操作的最佳实践(我更喜欢一个替代方案,因为它很简单)。状态确实会在您调度时(在它返回时)立即更新,这就是为什么给您一个函数来检索 thunk 中的状态,而不是简单地引用状态。通过这种方式,您可以通过一次调度更改状态,然后在需要时调用 getState() 以获取对新状态的引用以供读取。

redux-thunk正是您要寻找的。我认为这是非常好的做法。

为了回答您的问题,确实当第一次分派返回时,被调用的减速器已经改变了状态。

我知道这是一个迟到的回应:-P 你可以通过使用 Redux-Thunk 并签出 Redux-Saga 来做到这一点。Redux Saga 提供了一种惊人的方式来同时处理大量动作。下面是一个使用 Redux-Thunk 分派多个动作的例子

function getAndLoadSider(moduleName){
    return function(dispatch){
        return doSomeApiCall(someData).then(function(item){
            let _item = someOtherFunction(item.collections);
                let _menuData = {
                    name: item.name,
                    key: item.key
                };
            return new Promise(function(res, rej){
                dispatch(actionOne(_menuData));
                res(_item);
            }).then((_item) =>  dispatch(actionTwo(_item)))
    }
}

当一个操作依赖于第一个操作时,上述方法很适合您的情况。这是一种基于Promise的方法。如果您不喜欢进行大量的 Promise 编码,我建议您选择 Sagas。查看此链接https://redux-saga.js.org/docs/advanced/ComposingSagas.html,您将在其中学习如何编写 sagas。学习曲线陡峭;但是一旦你完成了,Sagas 会让你成为忍者 redux 开发者。

希望这可以帮助 :-)