对不起,我的英语,希望您能理解我。
我使用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
发生时做一些事情。您可以使用middleware
function myMiddleware() {
return store => next => action => {
const dataA = store.getState().dataA;
if(store.getState().dataA && action.type === 'actionB') {
doSomethingWithDataA(dataA);
}
};
}
然后你的 Action B变成如下
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
是什么,则可能不必做那么困难的事情,我会给出更好的答案。