对不起我的英语,我希望你能理解我。
我使用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
完成时无法获取。
那么如何处理这个问题呢?
答案 0 :(得分:3)
一般来说,您希望在dataA
准备就绪并且actionB
发生时执行某些操作。您可以使用middleware
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
的更多信息,可能您不必做这么难的事情,我会给出更好的答案。
答案 1 :(得分:0)
这种方法可能有所帮助,请注意我将使用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);
}
}