如何修复“PayloadAction 上不存在属性 X”？答案

【问题标题】：How to fix 'property X does not exist on PayloadAction'?如何修复“PayloadAction 上不存在属性 X”？
【发布时间】：2022-01-05 13:04:49
【问题描述】：

我最近决定将现有的 redux 项目重构为 redux-toolkit。该项目还使用打字稿。在authSlice.ts 中，我创建了异步thunk 并将'fullfilled' 案例的处理程序添加到extraReducers。现在打字稿给了我一个警告

“PayloadAction'.ts(2339)

我是打字稿的新手，没有足够的知识来发现问题。请帮我解决。

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

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

interface ResPayload {
  data: {
    idToken: string,
    email: string,
    refreshToken: string,
    expiresIn: string,
    localId: string,
    registered: boolean
  }
}

export const authenticate = createAsyncThunk(
  'auth',
  async ({ email, password, returnSecureToken }: ReqPayload) => {
    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,
  // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
  },
  // The `extraReducers` field lets the slice handle actions defined elsewhere,
  // including actions generated by createAsyncThunk or in other slices.
  extraReducers: (builder) => {
    builder
      .addCase(authenticate.fulfilled, (state, action) => {
        state.idToken = action.idToken
        state.localId = action.localId
        state.error = null
        state.isLoading = false
      })
  },
});

【问题讨论】：

标签： reactjs typescript redux firebase-authentication redux-toolkit

【解决方案1】：

您正在尝试在减速器中使用action.idToken，但这不存在。 Redux Toolkit 始终生成将其数据保存在 action.payload 字段中的操作对象。所以，你需要改用action.payload.idToken。

TypeScript应该实际上会在你的 IDE 中给你自动补全，并且会告诉你 action.payload 存在，并且从那里action.payload.idToken 存在。

【讨论】：

非常感谢，你让我很开心（：