我在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减速器所做的那样.这有可能吗?

推荐答案

你的myAsyncAction.fulfilled也是ActionCreator.

把它加到你的createAsyncThunk之后的MyAction-slice.ts:

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

还可以将extraReducers中的myAsyncAction.fulfilled替换为myAsyncActionCreator.

那么你的createListenerMiddleware应该是(store.ts):

export const listenerMiddleware = createListenerMiddleware()

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

另外,别忘了在你的减音器列表后面给你的configureStore个听众加prepend分:

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

遵循相同的 idea ,您也可以创建myAsyncAction.rejected个动作创建器,并以相同的方式将其导出并使用:

listenerMiddleware.startListening({
  actionCreator: myAsyncActionCreatorRejected

Reactjs相关问答推荐

react-native-markdown-显示样式表

如何使用React防止并发注册并处理Firestore数据库中的插槽可用性

如何在useEffect中使用useParams()

react 副作用循环

面对动画警告:未指定`useNativeDriver`.这是必需的选项,并且必须在REACT本机中显式设置为`true`或`False`

梅X折线图无响应

如何在整个应用程序中显示通用弹出窗口中的点击事件

获取更多数据后更新 DOM,而不刷新 React.js 中的页面

ReactJS中使用setState方法时,Context内部的State未进行更新

如何在 JS 中绘制具有不同笔画宽度的样条线

计数器递增 2 而不是 1

onChange in useEffect 的最佳实践

如何在悬停时更改 MUI 卡内容

如何使用 React Hook Form 将寄存器作为 props 发送到子组件来收集数据?

React Native PermissionsAndroid 不包括 READ_MEDIA_IMAGES.如何解决这个问题?

如何将值从下拉列表传递到 select 上的输入?响应式JS

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

如何使用react 路由将 url 参数限制为一组特定的值?

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

如何使用 babel 将 SVG 转换为 React 组件?