如何使用 redux thunk 应用构建器符号？

Question

我尝试使用构建器符号：https://redux-toolkit.js.org/api/createSlice#the-extrareducers-builder-callback-notation

但出现此错误：

Expression expected.

此处，extraReducers 中的最后一行：},

import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
import { AuthnRes } from '../tikexModule/Types'
import axios from 'axios'

const initialState: any = {
    resp: null,
}

const namespace = 'user'

export const getAuthnUser = createAsyncThunk(
    `${namespace}/getAuthnUser`,
    async () => {
        const { data } = await axios({
            method: 'get',
            url: 'me',
            headers: { crossDomain: true },
        })
        return data
    }
)

const userSlice = createSlice({
    name: 'authnUser',
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder.addCase(getAuthnUser.fulfilled, (state, { payload }) => {
            state.resp = payload
        }),
    }, // <------- HERE
})

//export const { setAuthnRes } = userSlice.actions
export default userSlice.reducer

怎么了？我想不通。

Answer 1

尝试删除 addCase

后的逗号

const userSlice = createSlice({
    name: 'authnUser',
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder.addCase(getAuthnUser.fulfilled, (state, { payload }) => {
            state.resp = payload
        }) // <------- HERE
    }, 
})

如何使用 redux thunk 应用构建器符号？

How to apply builder notation with redux thunk?

typescript

redux-thunk

redux-toolkit