如何修复Redux Toolkit中'Property X does not exist on PayloadAction'报错

问题根源 #

你在authenticate.fulfilled的回调里直接从action对象上取idToken、localId是错误的：Redux Toolkit 异步thunk返回的所有数据都会挂载到action的payload属性下，你要拿返回值必须从action.payload里取，所以TS才会提示action上不存在idToken属性。

修正方案 #

1. 核心修改点 #

调整extraReducers里的取值逻辑，把直接从action取字段改为从action.payload里获取对应字段即可，同时可以给createAsyncThunk加上显式的泛型声明，进一步规范类型，避免后续的类型报错。

修正后的完整代码 #

import axios from 'axios'
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

interface ReqPayload {
  email: string,
  password: string,
  returnSecureToken: boolean
}

// 抽离thunk返回值的类型，方便复用
interface AuthResponse {
  idToken: string,
  email: string,
  refreshToken: string,
  expiresIn: string,
  localId: string,
  registered: boolean
}

interface ResPayload {
  data: AuthResponse
}

// 给createAsyncThunk加泛型：第一个参数是返回值类型，第二个是入参类型
export const authenticate = createAsyncThunk<AuthResponse, ReqPayload>(
  'auth',
  async ({ email, password, returnSecureToken }) => {
    const API_KEY = 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
    const payload: ReqPayload = { email, password, returnSecureToken: true }
    const response: ResPayload = await axios.post(
      `https://identitytoolkit.googleapis.com/v1/accounts:${returnSecureToken ? 'signInWithPassword' : 'signUp'}?key=${API_KEY}`,
      payload
    )
    const { localId, idToken, expiresIn } = response.data
    const expirationDate = new Date(new Date().getTime() + (+expiresIn * 1000))
    localStorage.setItem('idToken', idToken)
    localStorage.setItem('localId', localId)
    localStorage.setItem('expirationDate', '' + expirationDate)

    return response.data
  }
);
interface AuthState {
  idToken: string | null,
  localId: string | null,
  error: object | null,
  isLoading: boolean,
}

const initialState: AuthState = {
  idToken: null,
  localId: null,
  error: null,
  isLoading: false,
}

export const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
  },
  extraReducers: (builder) => {
    builder
      .addCase(authenticate.fulfilled, (state, action) => {
        // 从payload里取对应字段
        state.idToken = action.payload.idToken
        state.localId = action.payload.localId
        state.error = null
        state.isLoading = false
      })
  },
});

内容的提问来源于stack exchange，提问作者devellopah