Почему TS выдает ошибку при попытке присвоить объект значению val: User | null = null?

Question

[Boris007]

Почему TS выдает ошибку при попытке присвоить объект, ведь в типе указано, что это null или тип User?

state = {
        id: token.user_id,
        name: token.user_name,
        role: token.user_role
      }

Type '{ id: number; name: string; role: string | null; }' is not assignable to type 'null'.

import { createSlice } from '@reduxjs/toolkit'

interface User {
    id: string;
    name: string;
    role: string;
}

interface Token {
  user_id: number;
  user_name: string;
  user_role: string | null;
  exp: number;
  iat: number;
}

const initialState: User | null = null

export const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUser: (state, action) => {
      const access_token = action.payload.split('Bearer ')[1]
      const token: Token = jwtDecode(access_token)
      state = {
        id: token.user_id,
        name: token.user_name,
        role: token.user_role
      }
    },
    removeUser: state => state = null
  }
})

export const { setUser, removeUser } = userSlice.actions
export const userReducer = userSlice.reducer

Comments

[WbICHA]

А что за createSlice мы гадать должны?

[Boris007]

WbICHA,
Это редакс
import { createSlice } from '@reduxjs/toolkit'

Answer 1

[Чипекве]

removeUser: state => state = null

removeUser: state => initialState

const initialState: {
  currentUser?:  User;
} = {}

state.currentUser = {
        id: token.user_id,
        name: token.user_name,
        role: token.user_role
}

https://stackoverflow.com/questions/63037105/why-i...

Comments

[Boris007]

При попытке сделать

return {
        id: token.user_id,
        name: token.user_name,
        role: token.user_role
      }

Выдает ошибку в setUser

Type '(state: null, action: { payload: any; type: string; }) => { id: number; name: string; role: string | null; access_token: any; }' is not assignable to type 'CaseReducer<null, { payload: any; type: string; }> | CaseReducerWithPrepare<null, PayloadAction<any, string, any, any>>'.
  Type '(state: null, action: { payload: any; type: string; }) => { id: number; name: string; role: string | null; access_token: any; }' is not assignable to type 'CaseReducer<null, { payload: any; type: string; }>'.
    Type '{ id: number; name: string; role: string | null; access_token: any; }' is not assignable to type 'void'.

[Boris007]

А если присвоить объект, то ошибка уже при присвоении null
const initialState: User | null = {}

Ошибка теперь здесь
removeUser: state => state = null

Type '(state: WritableDraft<User>) => null' is not assignable to type 'CaseReducer<User, { payload: any; type: string; }> | CaseReducerWithPrepare<User, PayloadAction<any, string, any, any>>'.
  Type '(state: WritableDraft<User>) => null' is not assignable to type 'CaseReducer<User, { payload: any; type: string; }>'.
    Type 'null' is not assignable to type 'void | User | WritableDraft<User>'.

[Чипекве]

Если state череез объект, то нужно изменить его форму

const initialState: {
  currentUser?:  User;
} = {}

      state.currentUser = {
        id: token.user_id,
        name: token.user_name,
        role: token.user_role
      }
    },

А для сброса возвращать initialState
removeUser: state => initialState

[Boris007]

Чипекве, спасибо!
Почему надо именно через свойство объект заводить, а нельзя просто объектом хранить?

И как мне добавить типизацию для null?
Что бы просто проверять на true/false есть объект юзера или значение пустое

[Чипекве]

В общем, у меня такая проблема была и всё что я нашёл - это либо через свойство объекта, как я описал, либо делать явный каст через as:
https://stackoverflow.com/questions/63037105/why-i...
Видимо там createSlice вместе с immer что-то такое чудит под капотом, что TS не совсем понимает.

А проверять на true/false можно как if(state.user?.currentUser)