[英]What should I do if an action depend on another async action in Redux?
抱歉我的英语,我希望你能理解我。
我使用redux-thunk
进行异步操作。
// actionA.js
export function actionA() {
return fetch('api call')
.then((data) => ({
type: 'actionA',
data: data
}))
}
// reducer.js
export function reducer(state, action) {
...
if(action.type === 'actionA') {
return {
...,
dataA: action.data,
...
};
}
}
// actionB.js
export function actionB() {
return (dispatch, getState) => {
if(!getState().dataA) {
dispatch(actionA());
}
doSomethingWithDataA(getState().dataA);
};
}
在某些情况下,我只需要在不调度actionA
情况下发送actionB
。 但是,当我派遣actionB
, actionB
将使用dataA
和dataA
是由创建actionA
。 因此,在actionB
,我会检查是否有dataA
的Store
,如果没有,我会派遣actionA
第一。 但是actionA
是一个异步动作,当actionA
完成时我无法获得。 那么如何处理这个问题呢?
一般来说,你想要做的事,当dataA
准备和actionB
没有发生过。 你可以使用中间件来做到这一点
function myMiddleware() {
return store => next => action => {
const dataA = store.getState().dataA;
if(store.getState().dataA && action.type === 'actionB') {
doSomethingWithDataA(dataA);
}
};
}
然后你的actionB变成了以下
function lazyFetchDataA() {
return (dispatch, getState) => {
if(!getState().dataA) {
return dispatch(actionA());
} else {
return Promise.resolve();
}
}
}
export function actionB() {
return (dispatch, getState) => {
lazyFetchDataA().then(() => dispatch({type: 'actionB'}))
}
}
它看起来很难,但现在你在适当的地方有很少的代码可以做你的事情。
如果你提供更多关于你的doSomethingWithDataA
信息,你可能不必做这么难的事情,我会给出一个更好的答案。
这种方法可能会有所帮助,请注意我将使用fetch polyfill返回aysnc请求的承诺。
function actionA(dataA) {
return {
type: 'actionA',
data: dataA
};
}
export function actionB() {
return (dispatch, getState) => {
if(!getState().dataA) {
return fetch('api call')
.then((data) => {
dispatch(actionA(data))
})
.catch((error) => {// handle error})
}
return doSomethingWithDataA(getState().dataA);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.