redux thunk 调度后从商店返回承诺 [英] return promise from store after 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函数时可以使用dispatch函数

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

这里有一个完整的示例，说明您如何编写操作创建器，从其他操作创建器分派操作和异步操作，并使用 Promise 构建您的控制流.

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;//我将此注释添加到代码中 //在开始下面的下一个之前执行此操作

//EDIT : To be sure that the store has processed that action completely before anything else happens in the function action_creator() you can dispatch this simple_action before action_creator(); // I added this comment to the code //Do this action before starting the next one below

这篇关于redux thunk 调度后从商店返回承诺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！