대/소문자를 구분할 수 없는 값에 대한 대/소문자를 구분하지 않고 반환해서는 안 됨

대/소문자를 구분할 수 없는 값에 대한 대/소문자를 구분하지 않고 반환해서는 안 됨

나는 내 프로젝트를 하고 있다.@reduxjs/toolkit그리고 창조되었다.UserSlice아래와 같이

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { User } from "../../models";

export type UserState = User | null;

export const initialUserState: UserState = null;

const UserSlice = createSlice({
  name: "User",
  initialState: initialUserState,
  reducers: {
    receiveUser: (state: UserState, action: PayloadAction<UserState>) => {
      state = action.payload;
    },
    clearUser: (state: UserState, _action: PayloadAction<void>) => {
      state = null;
    },
    signIn: (
      _,
      _action: PayloadAction<{
        email: string;
        password: string;
      }>
    ) => {},
    signInWithToken: (_, _action: PayloadAction<void>) => {},
  },
});

export default UserSlice;

signIn signInWithToken단지 에 대한 조치를 취하기 위한 액션 창조자UserSaga모듈, 그래서 아무것도 안해

발송 시signIn조치, 아래의 오류가 발생한다.

index.js:1 Error: A case reducer on a non-draftable value must not return undefined
    at createReducer.ts:163
    at Array.reduce (<anonymous>)
    at createReducer.ts:143
...

이 코드 스니펫 패턴은 내 다른 프로젝트들은 잘 작동하지만, 이 프로젝트는.이 오류의 원인을 알 수 없어서 이런 질문을 하는 겁니다.내 코드에 결함이 있나?

화살표 기능을 사용할 때는 둥근 괄호가 추가로 필요하기 때문에 모든 환원기에서 상태를 되돌리지는 않을 겁니다.

  reducers: {
    receiveUser: (state: UserState, action: PayloadAction<UserState>) => ({
      state: action.payload;
    }),
    clearUser: (state: UserState, _action: PayloadAction<void>) => ({
      state : null;
    }),
    signIn: (
      _,
      _action: PayloadAction<{
        email: string;
        password: string;
      }>
    ) => ({}),
    signInWithToken: (_, _action: PayloadAction<void>) => ({}),
  },

Reducx 툴킷createReducer()국가를 직접 변이시키는 감쇄기를 허용한다.이 작업은 환원기 호출을 다음으로 감싸는 방식으로 작동한다.produce이머 도서관에서 말이야

그러나 환원기 호출은 현재 상태가 임머에 의해 "선도가능"되지 않을 때 포장되지 않는다. 이는 다음을 포함한 원시적 가치의 경우다.null:

} else if (!isDraftable(previousState)) {
  // If state is not draftable (ex: a primitive, such as 0), we want to directly
  // return the caseReducer func and not wrap it with produce.
  const result = caseReducer(previousState as any, action)

  if (typeof result === 'undefined') {
    throw Error(
      'A case reducer on a non-draftable value must not return undefined'
    )
  }

  return result
}

초기 사용자 상태는null, 당신은 당신의 상태로부터 새로운 상태를 반환해야 한다.receiveUser()환원제

화살표 함수는 두 가지 구문 형식을 가지고 있다.

• (param1, param2, …, paramN) => {문 }
• (param1, param2, …, paramN) => 식

첫 번째 값은 다음 값을 포함하지 않는 한 값을 반드시 반환되는 것은 아니다.return두 번째는 값을 반환할 것이다.당신은 안에서 반품 없이 첫 번째 양식을 사용하고 있어서 아무것도 돌려주지 않을 겁니다.

라는 규칙이 있기 때문에a case reducer on a non-draftable value must not return undefined함수 본문을 괄호화하여 다음과 같은 객체 문자 식을 반환할 수 있다.

params => ({foo: bar})

여기에 코드를 다시 쓸 수 있다.

reducers: {
  receiveUser: (state: UserState, action: PayloadAction<UserState>) => ({
    state: action.payload;
  }),
  clearUser: (state: UserState, _action: PayloadAction<void>) => ({
    state : null;
  }),
  signIn: (
    _,
    _action: PayloadAction<{
      email: string;
      password: string;
    }>
  ) => ({}),
  signInWithToken: (_, _action: PayloadAction<void>) => ({}),
},

두 가지 가능한 문제가 있다.

1. 당신은 아마도 단지 당신의 버전에 부딪칠 필요가 있을 것이다.@reduxjs/toolkit에 의한 최신판까지.npm i @reduxjs/toolkit@latest또는yarn add @reduxjs/toolkit@latest.

버그가 있는 버전이 있었는데 만약 당신이 null로 상태를 초기화한다면, 이것은 잠재적으로 일어날 수 있다.최신 버전을 설치했는데도 여전히 문제가 있다면 어떤 버전을 사용하고 있는지 알려주면 재현해 볼게.

2. 또 다른 가능한 문제는 만약 당신의 의사가action.payload에receiveUser실제로 정의되지 않은 경우, 정의되지 않은 상태로 반환되어서는 안 되는 오류를 얻게 될 것이다.

참조URL: https://stackoverflow.com/questions/62966863/a-case-reducer-on-a-non-draftable-value-must-not-return-undefined