如何修复 'property X does not exist on PayloadAction'？

Question

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

Property 'idToken' does not exist on type 'PayloadAction<{ idToken: string; email: string; refreshToken: string; expiresIn: string; localId: string; registered: boolean; }, string, { arg: ReqPayload; requestId: string; requestStatus: "fulfilled"; }, never>'.ts(2339)

我是 typescript 的新手，没有足够的知识来发现问题。请帮我解决一下。

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
      })
  },
});

Answer 1

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

TypeScript 应该实际上会在 IDE 中为您提供自动完成功能，并会向您显示 action.payload 存在，并从那里显示 action.payload.idToken存在。

如何修复 'property X does not exist on PayloadAction'？

How to fix 'property X does not exist on PayloadAction'?

typescript

reactjs

firebase-authentication

redux

redux-toolkit