typescript - Egenskapen 'user' finnes ikke på typen 'WritableDraft<{ name: string; }>'

Jeg er ny med TypeScript. Jeg prøver å bruke TypeScript med Redux, men jeg står fast med denne feilen: Property 'user' does not exist on type 'WritableDraft<{ name: string; }>'. Jeg fulgte steg for steg med en tutorial på YouTube, men det fungerer ikke i prosjektet mitt. Noen ideer?

Her er koden min:

import { createSlice } from '@reduxjs/toolkit';
import React from 'react';

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    name: '',
  },
  reducers: {
    login: (state, action) => {
      state = action.payload;
    },
    logout: (state) => {
      state.user = null;
    },
  },
});

export const { login, logout } = userSlice.actions;

export const selectUser = (state: { user: { user: any } }) => state.user.user;

export default userSlice.reducer;

Svar #1

Redux vil utlede typen til state (i dine reduksjoner) fra verdien initialState som sendes til funksjonen createSlice, her:

...
initialState: {
  name: '',
}, // type of your state is: { name: string } - notice how it does not have a `user` property!
...

I dine reducers vil du få en WritableDraft-instans av tilstanden som det første argumentet, på denne måten:

logout: (state: WritableDraft<{ name: string }>) => {
  state.user = null; // 'user' property does not exist in your state type! (as defined in the `initialState`)
},

For å oppnå det jeg tror du prøver å oppnå, trenger du bare å abstrahere name-variabelen inne i en user-egenskap, slik:

...
initialState: {
  user: { name: '' }
},
reducers: {
  login: (state, action) => {
    state.user = action.payload;
  },
  logout: (state) => {
    state.user = null;
  },
}
...

På dette tidspunktet vil jeg anbefale å eksplisitt angi typen for tilstands- og handlingsdataene dine.

F.eks.

export type User {
  name: string
}

export type UserState = {
  user: User | null
}

... og i dine reduksjoner:

login: (state, action: PayloadAction<User>) => {
  state.user = action.payload; // action.payload will be of type 'User'
},
logout: (state) => {
  state.user = null
}

Uansett, det ser ut til at du har gått glipp av noe fra veiledningen siden du i din egen kode har en velger som definerer din tilstand som state: { user: { user: any } }. Å eksplisitt definere typen på tilstanden din, som ovenfor, bør hjelpe med å redusere disse problemene i fremtiden.

Svar #2

Datastrukturen til user-tilstandsdelen er { name: string }.

import { combineReducers, configureStore, createSlice } from '@reduxjs/toolkit';

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    name: '',
  },
  reducers: {
    login: (state, action) => {
      state.name = action.payload;
    },
    logout: (state) => {
      state.name = '';
    },
  },
});

export const { login, logout } = userSlice.actions;

export const selectUser = (state: { user: { name: string } }) => state.user;

const store = configureStore({ reducer: combineReducers({ user: userSlice.reducer }) });
console.log(store.getState());
store.subscribe(() => {
  console.log('selectUser:', selectUser(store.getState()));
});

console.log(store.dispatch(login('John')));

Logger :

{ user: { name: '' } }
selectUser: { name: 'John' }
{ type: 'user/login', payload: 'John' }

Relaterte artikler