在redux thunk发货后从商店退还promise

Question

我正试着和redux thunk联系

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

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

我如何让调度从商店返回promise？

更具体地说：

我可能只是不理解这里的一些内容，但在所有使用redux-thunk的示例中，它们调用一个单独的异步事件（比如fetch），它显然会返回一个promise。

我特别想要的是当我向商店发送一个动作时：我如何确保商店在上面的函数action\u creator（）中发生任何其他事情之前，已经完全处理了该动作。

理想情况下，我希望商店能回报一些promise，但我不明白这是怎么发生的，在哪里发生的？

Answer 1

dispatch将返回它调用的操作/函数返回的任何内容；因此，如果您想链接某些活动（根据您的示例），您的操作需要返回一个promise。

正如@Aaleks提到的，如果你的行为是一个thunk，你可以创建一个场景，返回一个promise，然后你可以按照你提到的做。

顺便说一句，我认为命名你的thunkaction_creator有点误导，因为simple_action实际上是Redux语言中的Action Creator-已相应编辑：）

Answer 2

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

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

当您调度（一些ThenableThunk（'hello-world'））时，它会返回一个Promise对象，您可以将进一步的操作链接到该对象。

Answer 3

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

thunk中间件知道如何将thunk异步动作转化为动作，所以你只需要让你的simple_action（）成为一个thunk，thunk中间件会为你完成这项工作，如果中间件看到一个正常的动作，他会像正常一样调度这个动作操作，但是如果它是一个异步函数，它会把你的异步操作变成正常操作。

所以你的简单动作需要是thunk（thunk是一个返回函数的函数）例如：

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

当使用makeASandwichExticSauce函数时，您可以使用分派功能

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!');
});

下面是一个完整的例子，说明如何编写动作创建者，从其他动作创建者那里调度动作和异步动作，并用promise构建控制流。

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 !");
);

为了创造你自己的promise，你可以使用像蓝鸟这样的图书馆。

//编辑：为了确保在函数action_creator（）中发生任何其他操作之前，商店已经完全处理了该操作，您可以在action_creator（）之前调度这个简单的_操作我在代码中添加了这个注释。//在开始下面的下一个操作之前执行此操作。