Решил освежить 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)
Подскажите, пожалуйста, как пофиксить.