在redux thunk dispatch之后从商店返回承诺

问题描述：

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

I am trying to chain dispatches with redux thunk

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

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

我如何获得发送以从商店？

How do I get the dispatch to return a promise from the store?

更具体：

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

I am probably just not understanding something here, but in all the examples with redux-thunk, they call a separate async event (like fetch), which obviously returns a Promise.

我特意寻找的是当我向商店发送一个动作时：如何确保商店在完成任何其他事件之前完全处理了该动作函数 action_creator（）以上。

What I'm specifically looking for is when I dispatch an action to the store: How do I make certain the store has processed that action completely before anything else happens in the function action_creator() above.

理想情况下，我希望商店能够获得某种承诺，但我不明白这是怎么回事？

Ideally, I would like the store to return some sort of promise, but I don't understand how or where that happens?

答

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

Here you have an example on how to dispatch and chain async action. https://github.com/gaearon/redux-thunk

thunk中间件知道如何将thunk异步操作转换为动作，所以你必须让你的simple_action（）成为thunk而thunk中间件将为你完成这项工作，如果中间件看到一个正常动作，他会将此动作作为正常动作发送，但如果它是异步功能，则会将异步动作转为正常动作。

The thunk middleware knows how to turn thunk async actions into actions, so you just have to have your simple_action() to be a thunk and the thunk middleware will do the job for you, if the middleware see a normal action, he will dispatch this action as normal action but if it's an async function it will turn your async action into normal action.

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

So your simple_action need to be a thunk ( A thunk is a function that returns a function.) Like this for example:

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

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

When using the makeASandwichWithSecretSauce function you can use the dispatch function

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构建控制流。

Here a complete example on how you can write action creators that dispatch actions and async actions from other action creators, and build your control flow with 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这样的库。

To create you own promises you can use a library like bluebird.

//编辑：
为了确保商店在函数action_creator（）中发生任何其他事情之前完全处理了该操作，您可以在action_creator（）之前调度此simple_action; //我将此评论添加到代码 //在开始下面的下一个操作之前执行此操作

在redux thunk dispatch之后从商店返回承诺

相关推荐