devellopah
@devellopah

Как пофиксить ошибку(property does not exist on PayloadAction) в typescript?

Решил освежить react(typescript) проект, заюзав redux-toolkit (просто пощупать эту штуку).
Создал authSlice.ts, ниже выкладываю релевантные к проблеме куски из этого файла.
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
  }
);


Добавил обработчик для успешного запроса в extraReducers

export 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: {
    logout: (state) => {
      localStorage.removeItem('idToken')
      localStorage.removeItem('expirationDate')
      localStorage.removeItem('localId')

      state.idToken = null
      state.localId = null
    },
  },
  // 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
      })
  },
});


А это предупреждение от typescript
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)


Подскажите, пожалуйста, как пофиксить.
  • Вопрос задан
  • 359 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы