Redux连接异步操作
问题描述:
我正在尝试设置redux,react-redux和redux-thunk。认为一般情况不错,但是我有一个关于将多个异步操作链接在一起时应该看起来如何的问题。Redux连接异步操作
具体而言,我有一个场景,可以单独或间接地调用可以调用它们的另一个动作。我的问题是,如果我想成为惯用语,应该如何编写selectItem
?
action.js
export function fetchByContext(contextId) {
return dispatch => {
_fetchByContext(messages => {
dispatch({ type: RECEIVE_MESSAGES, ... });
});
};
};
export function subscribeByContext(contextId) {
return dispatch => {
_subscribeByContext(messages => {
dispatch({ type: RECEIVE_MESSAGES, ... });
});
};
};
export function selectItem(contextId) {
return dispatch => {
subscribeByContext(contextId)(dispatch);
fetchByContext(contextId)(dispatch);
};
};
答
我认为最关键的是(ref):
从内部功能的返回值将作为调度本身
的返回值
如果fetchByContext()
,的内部函数返回一个承诺,这些可以串联或从selectItem()
并行运行。一个未经考验的实现,假设既不_fetchByContext()
也不_subscribeByContext()
回报承诺是:
export function fetchByContext(contextId) {
return dispatch => {
return new Promise((resolve, reject) => {
_fetchByContext(messages => {
dispatch({ type: RECEIVE_MESSAGES, ... });
resolve(messages);
});
});
};
};
export function subscribeByContext(contextId) {
return dispatch => {
return new Promise((resolve, reject) => {
_subscribeByContext(messages => {
dispatch({ type: RECEIVE_MESSAGES, ... });
resolve(messages);
});
});
};
};
export function selectItem(contextId) {
return dispatch => {
// CALL IN SERIES
return dispatch(subscribeByContext(contextId))
.then(() => dispatch(fetchByContext(contextId)));
// CALL IN PARALLEL (alternative to the code above; this is probably not what you want - just keeping for reference)
return Promise.all(
dispatch(subscribeByContext(contextId)),
dispatch(fetchByContext(contextId))
);
};
}
再次请注意上面的代码是未经测试,只是给予了一般的解决方案的想法希望。
异步,等待keywork也许可以帮助 –