如何将多个中间件链接在一起

Question

如何将2个中间件链接在一起？我有一些操作RequestInfoAction, RequestBuildNameAction需要从api获得响应。由于需要应用程序，我需要在buildName之前执行setInfo中间件我的想法是将setInfo作为参数传递给buildName，并在buildName下执行它。但这似乎不可能那么，我如何将中间件链接在一起并使它们异步执行呢？

//middleware
export const buildName = (action: AnyAction) => {
return (dispatch, getState) => {
const num = getState()?.number || 0;
dispatch(action);
};
};

export const setInfo = (action: AnyAction) => {
return (dispatch, getState) => {
const information = getState()?.info || {};
dispatch(action);
};
};
import {useDispatch}
export default function App() {
const dispatch = useDispatch();
const handleOnClick = callBack(()=>{
dispatch(setInfo(RequestBuildNameAction))
dispatch(buildName(RequestBuildNameAction))
//maybe something like dispatch(buildName(setInfo(RequestBuildNameAction)))
})
return (
<div className="App">
<button onClick={handleOnClick}></button>
</div>
);
}

Answer 1

export default function App() {
const dispatch = useDispatch();
const handleOnClick = useCallBack(async ()=>{
await dispatch(setInfo(RequestBuildNameAction))
await dispatch(buildName(RequestBuildNameAction))
})
return (
<div className="App">
<button onClick={handleOnClick}>Click</button>
</div>
);
}

Answer 2

您可以使用promise或async/await。

异步/等待将是一个更好的选择：

export default function App() {
const dispatch = useDispatch();
const handleOnClick = useCallBack(async ()=>{
await dispatch(setInfo(RequestBuildNameAction))
dispatch(buildName(RequestBuildNameAction))
})
return (
<div className="App">
<button onClick={handleOnClick}></button>
</div>
);
}