redux thunk 调度后从商店返回承诺

Question

我正在尝试使用 redux thunk 链接调度

function simple_action(){
  return {type: "SIMPLE_ACTION"}
}

export function async_action(){
  return function(dispatch, getState){
    return dispatch(simple_action).then(()=>{...});
  }
}

我如何获得商店的退货承诺？

进一步来说：

我可能只是不明白这里的东西，但在所有带有 redux-thunk 的例子中，他们调用一个单独的异步事件（比如 fetch ），它显然返回一个 Promise 。

我特别要寻找的是当我向商店发送操作时：如何确保商店在上面的函数 action_creator() 中发生任何其他事情之前完全处理了该操作。

理想情况下，我希望商店返回某种承诺，但我不明白这是如何或在哪里发生的？

原文由 l2silver 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这里有一个关于如何分派和链接异步操作的示例。 https://github.com/gaearon/redux-thunk

thunk 中间件知道如何将 thunk 异步操作转换为操作，所以你只需要让你的 simple_action() 成为一个 thunk 并且 thunk 中间件会为你完成这项工作，如果中间件看到一个正常的动作，他会派发这个动作作为正常动作，但如果它是一个异步函数，它将把你的异步动作变成正常动作。

所以你的 simple_action 需要是一个 thunk（一个 thunk 是一个返回函数的函数。）例如：

 function makeASandwichWithSecretSauce(forPerson) {
  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}

使用 makeASandwichWithSecretSauce 函数时，您可以使用调度函数

store.dispatch(
  makeASandwichWithSecretSauce('Me')
);

乃至

// It even takes care to return the thunk’s return value
// from the dispatch, so I can chain Promises as long as I return them.

store.dispatch(
  makeASandwichWithSecretSauce('My wife')
).then(() => {
  console.log('Done!');
});

这里有一个完整的示例，介绍如何编写动作创建器来分派动作和来自其他动作创建器的异步动作，并使用 Promises 构建控制流。

 function makeSandwichesForEverybody() {
  return function (dispatch, getState) {
    if (!getState().sandwiches.isShopOpen) {
      // You don’t have to return Promises, but it’s a handy convention
      // so the caller can always call .then() on async dispatch result.
      return Promise.resolve();
    }

    //Do this action before starting the next one below
    dispatch(simple_action());

    // We can dispatch both plain object actions and other thunks,
    // which lets us compose the asynchronous actions in a single flow.
    return dispatch(
      makeASandwichWithSecretSauce('My Grandma')
    ).then(() =>
      Promise.all([
        dispatch(makeASandwichWithSecretSauce('Me')),
        dispatch(makeASandwichWithSecretSauce('My wife'))
      ])
    ).then(() =>
      dispatch(makeASandwichWithSecretSauce('Our kids'))
    ).then(() =>
      dispatch(getState().myMoney > 42 ?
        withdrawMoney(42) :
        apologize('Me', 'The Sandwich Shop')
      )
    );
  };
}
//apologize and withdrawMoney are simple action like this for example
      return {
        type:  "END_SUCESS"
      }

//用法

store.dispatch(
  makeSandwichesForEverybody()
).then(() =>
    console.log("Done !");
);

要创建您自己的承诺，您可以使用像 bluebird 这样的库。

//编辑：为了确保商店在函数 action_creator() 中发生任何其他事情之前完全处理了该操作，您可以在 action_creator() 之前分派此 simple_action； // 我在代码中添加了这个注释 //Do this action before starting the next one below

原文由 Aaleks 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是我最近一直在使用的模式：

 export const someThenableThunk = someData => (dispatch, getState) => Promise.resolve().then(() => {
  const { someReducer } = getState();
  return dispatch({
    type: actionTypes.SOME_ACTION_TYPE,
    someData,
  });
});

当你 dispatch(someThenableThunk('hello-world')) 时，它返回一个 Promise 对象，你可以将进一步的操作链接到该对象。

原文由 Mapsy 发布，翻译遵循 CC BY-SA 4.0 许可协议