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

return promise from store after redux thunk dispatch

提问by l2silver

I am trying to chain dispatches with redux thunk

我正在尝试使用 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?

我如何获得调度以返回商店的承诺？

MORE SPECIFICALLY:

进一步来说：

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.

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

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.

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

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

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

采纳答案by Aaleks

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

这里有一个关于如何调度和链接异步操作的示例。https://github.com/gaearon/redux-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.

thunk 中间件知道如何将 thunk 异步动作转换为动作，所以你只需要让你的 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:

所以你的 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))
    );
  };
}

When using the makeASandwichWithSecretSauce function you can use the dispatch function

使用 makeASandwichWithSecretSauce 函数时，您可以使用 dispatch 函数

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

And even

乃至

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

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.

这里有一个完整的示例，说明如何编写动作创建器，从其他动作创建器分派动作和异步动作，并使用 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"
      }

//usage

//用法

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

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

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

//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

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

回答by Mapsy

This is a pattern I've been using recently:

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

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

When you dispatch(someThenableThunk('hello-world')), it returns a Promiseobject that you can chain further actions to.

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

回答by a darren

dispatchwill return whatever the action/function it calls returns; so if you want to chain certain activities (as per your example), your action would need to return a Promise.

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

As @Aaleks mentions, if your action were a thunkyou can create a scenario where you return a Promise, then you could do as you mention.

正如@Aaleks 所提到的，如果您的操作是 athunk您可以创建一个返回 a 的场景Promise，那么您可以按照您的说明进行操作。

BTW I think naming your thunkaction_creatoris a bit misleading, as simple_actionis actually an Action Creator in Redux parlance - have edited accordingly :)

顺便说一句，我认为命名您thunkaction_creator的名称有点误导，simple_action实际上是 Redux 中的 Action Creator - 已进行相应编辑:)