退货发货后退回商店承诺

我正在尝试用重复思考连接调度

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()中发生任何其他事情之前完全处理了该操作。

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

77008 次浏览
小开
最佳答案

这里有一个关于如何分派和链接异步操作的示例

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

在使用 makASandwichWithSecretariat Sauce 函数时，可以使用调度函数

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

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

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

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

编辑: 为了确保在 action _ create ()函数中发生任何其他事情之前，存储已经完全处理了这个操作，您可以在 action _ create ()函数之前发送这个 simple _ action;//我将这条注释添加到代码 //Do this action before starting the next one below中

小开

dispatch将返回它调用的操作/函数返回的任何内容; 因此，如果您想要链接某些活动(按照您的示例) ，那么您的操作将需要返回一个 Promise。

正如@Aalek 提到的，如果你的动作是 thunk，你可以创建一个场景，返回一个 Promise，然后你可以做你提到。

顺便说一下，我认为命名你的 thunk action_creator是有点误导，因为 simple_action实际上是一个行动创造者在 Redux 的说法-有相应的编辑:)

小开

这是我最近使用的一种模式:

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对象，您可以将进一步的操作链接到该对象。

小开

你需要做的就是创建一个 trunkate 操作，它返回一个极好的结果。调度函数返回作为参数添加到其调用中的内容。例如，如果您希望调度返回  诺言，那么您必须将承诺作为参数添加到调用中。

function simple_action() {
return { type: 'SIMPLE_ACTION' };
}


export function async_action(dispatch, getState) {
return function () {
return Promise.resolve(dispatch(simple_action()));
}
}


const boundAction = async_action(dispatch, getState);
boundAction().then(() => {});
小开

异步操作以及在使用 redux和 thunk时如何从组件调用操作

没有承诺

action.js

export function shareForm(id) {
return function (dispatch) {
dispatch({
type: 'SHARE_FORM',
payload: source.shareForm(id)
})
}
}

SomeComponent.js

dispatch(shareForm(id))

我保证

action.js

export function shareForm(id, dispatch) {
return new Promise((resolve, reject) => {
dispatch({
type: 'SHARE_FORM',
payload: source.shareForm(id)
})
.then(res => resolve(res))
.catch(err => reject(err))
})
}

SomeComponent.js

shareForm(id, dispatch)
.then(res => console.log('log on success', res))
.catch(err => console.log('log on failure', err))

PS: 如果你需要更多的解释，请在评论中告诉我


提交答案