React Thunk Resolver reasie error: A computed property name must be of type 'string', 'number', 'symbol', or 'any'

Question

遇到这个错误：

A computed property name must be of type 'string', 'number', 'symbol', or 'any'.

在这一行

> [getAuthnUser.fulfilled](state, { payload }) {

组件：

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: {
        [getAuthnUser.fulfilled](state, { payload }) {
            state.resp = payload
        },
    },
})

export default userSlice.reducer

Answer 1

我们不再推荐 extraReducers 的对象表示法，尤其是对于 TypeScript，您应该使用 "builder notation".

如您所见，对象表示法在 TypeScript 中表现不佳。

    extraReducers: builder => {
        builder.addCase(getAuthnUser.fulfilled, (state, { payload }) {
            state.resp = payload
        }),
    },

React Thunk Resolver reasie error: A computed property name must be of type 'string', 'number', 'symbol', or 'any'

React Thunk Resolver reasie error: A computed property name must be of type 'string', 'number', 'symbol', or 'any'

redux-thunk

redux-toolkit