我在store.ts
中定义了Redux createListenerMiddleware
:
export const listenerMiddleware = createListenerMiddleware()
listenerMiddleware.startListening({
actionCreator: myAction,
effect: (action, listenerApi) => {
// do job
}
})
则在单独的MyAction-slice.ts
中将myAction
动作定义如下:
const applicationSlice = createSlice({
name: 'app',
initialState: initialState,
reducers: {
myAction(state) {
// do pure functional code here
},
}
})
当我从一个Reaction组件调用myAction
时,它工作得很好(首先myAction
完成了它的工作,然后针对该特定操作触发了createListenerMiddleware
,例如:
return (
<>
<button onClick={() => dispatch(myAction())}>
</>
)
然而,我在MyAction-slice.ts
中也有createAsyncThunk
的定义,如下所示:
export const myAsyncAction = createAsyncThunk(
'app/async',
async () => {
const promiseData = await axios.get(`https://localhost:8888/hello`)
// handle errors for promiseData
return promiseData
}
)
然后我声明createSlice
中的thunk
如下:
...
extraReducers: (builder) => {
builder
.addCase(myAsyncAction.fulfilled, (state, payload) => {
// change state with a pure functional way
})
...
另外,在我的MyAction-slice.ts
个文件的末尾,我将操作导出为:
export const {myAction} = applicationSlice.actions
我的问题是,我希望以某种方式"挂钩"到myAsyncAction.fulfilled
减速器使用createListenerMiddleware
,就像我对myAction
减速器所做的那样.这有可能吗?