A case reducer on a non-draftable value must not return undefined 문제 해결

문제 코드

• authSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = false; // 초기 state
const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    login: (state, action) => {
      state = true;
    },
    logout: (state, action) => {
      state = false;
    }
  }
});

export const { login, logout } = authSlice.actions;
export default authSlice.reducer;

• Login.jsx

import { useDispatch } from "react-redux";
import { login } from "redux/modules/authSlice";

const Login = () => {
  const dispatch = useDispatch();
  
  // Submit Handler
  const onSubmitHandler = () => {
    dispatch(login());
  };
};

에러 메시지

Error: A case reducer on a non-draftable value must not return undefined

원인

const initialState = false;

redux-toolkit은 자체적으로 Immer 라이브러리를 사용하여 state의 참조 값의 내부적인 변화 를 탐지한다.

하지만, 현재 initialState의 값은 원시 타입이기 때문에, state가 변화할 때 state의 참조 값의 내부 값 이 변화하는 것이 아니고, state의 참조 값 자체 가 변화한다.

따라서, Immer 라이브러리가 state의 참조 값의 내부적인 변화를 탐지할 수 없어 undefined를 반환한다.

해결 방법

state를 참조 타입(ex. 객체) 으로 변경한다.

// AS-IS
const initialState = false;	// <- here
const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    login: (state, action) => {
      state = true;		// <- here
    },
    logout: (state, action) => {
      state = false;	// <- here
    }
  }
});

// TO-BE
const initialState = {
  isLoggedIn: false,	// <- here
};
const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    login: (state, action) => {
      state.isLoggedIn = true;	// <- here
    },
    logout: (state, action) => {
      state.isLoggedIn = false;	// <- here
    }
  }
});