createListenerMiddleware 在 extraReducer 完成工作时触发？

Question

我在

createListenerMiddleware

:

 中定义了 Redux 

store.ts

export const listenerMiddleware = createListenerMiddleware()

listenerMiddleware.startListening({
    actionCreator: myAction,
    effect: (action, listenerApi) => {
      //  do job
    }
})

然后

myAction

动作在单独的

MyAction-slice.ts

中定义如下：

const applicationSlice = createSlice({
    name: 'app',
    initialState: initialState,
    reducers: {
        myAction(state) {
            // do pure functional code here
        },
    }
})

当我从 React 组件调用

myAction

时，它工作得很好（首先

myAction

完成了它的工作，然后针对该特定操作的

createListenerMiddleware

已被触发，例如：

return (
    <>
        <button onClick={() => dispatch(myAction())}>
    </>
)

但是我在

createAsyncThunk

中也定义了

MyAction-slice.ts

，如下所示：

export const myAsyncAction = createAsyncThunk(
    'app/async',
    async () => {
        const promiseData = await axios.get(`https://localhost:8888/hello`)
        // handle errors for promiseData
        return promiseData
    }
)

然后我在

thunk

中声明

createSlice

如下：

...
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

减速器所做的那样。还可能吗？

Answer 1

您的

myAsyncAction.fulfilled

也是

ActionCreator

。

将其添加到您的

MyAction-slice.ts

之后

createAsyncThunk

:

export const myAsyncActionCreator = myAsyncAction.fulfilled as AsyncThunkFulfilledActionCreator<AxiosResponse<any, any>, AsyncThunkConfig>

那么你的

createListenerMiddleware

看起来会像 (

store.ts

):

export const listenerMiddleware = createListenerMiddleware()

listenerMiddleware.startListening({
    actionCreator: myAsyncActionCreator,
    effect: (action, listenerApi) => {
      //  do job
    }
})

也不要忘记在你的减速器列表之后

prepend

这个听众到你的

configureStore

：

export const store = configureStore({
reducer: {...}
middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware().prepend(listenerMiddleware.middleware),
})

遵循相同的想法，您还可以创建

myAsyncAction.rejected

动作创建器并以相同的方式将其导出并用作：

listenerMiddleware.startListening({
  actionCreator: myAsyncActionCreatorRejected