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

'분할할 수 없는 값에 대한 대/소문자 구분자는 정의되지 않은 값을 반환하면 안 됩니다'

redux-toolkit을 계속 시도해보다가 만난 오류.

// 오류 발생 코드
const activeSlice = createSlice({
  name: 'activeSlice',
  initialState: '',
  extraReducers: (builder) => {
    builder.addCase(ActiveAPI.fulfilled, (state, action) => {
      state = action.payload.activity;
    });
  },
});
export default activeSlice;
export const ActiveAPI = createAsyncThunk('active', async (_, thunkAPI) => {
  try {
    const data = await axios
      .get('API주소')
      .then((res) => res.data);
    return data;
  } catch (error) {
    return error;
  }
});

에러 메세지를 읽어보아도 어째서 발생한 오류인지 알 수 없어서 검색의 힘을 빌렸다.
마침 스택오버플로우에 정확히 같은 오류가 발생한 분의 글이 읽어서 참고.

요약하자면 현재의 상태(initialState)가 null을 포함한 원시값 등 의 다룰 수 없는 값일 경우 이러한 오류가 발생한다는 것 같았다.

위 오류가 난 코드의 경우도 InitialState가 ''로 원시 문자열이었기 때문에 해당 오류가 발생한 것.

const activeSlice = createSlice({
  name: 'activeSlice',
  initialState: { value: '' },
  extraReducers: (builder) => {
    builder.addCase(ActiveAPI.fulfilled, (state, action) => {
      state.value = action.payload.activity;
    });
  },
});

이와 같이 initialState의 값을 변경했더니 해당 오류가 사라지고 정상적으로 어플이 작동되었다.