@reduxjs/toolkit 报错，解决

项目场景：

使用redux存储状态，写一个reducer

问题描述

报错：Uncaught Error: A case reducer on a non-draftable value must not return undefined

import { createSlice } from "@reduxjs/toolkit";
//错误写法
const counterSlice = createSlice({
    name: 'countNumTwo',
    initialState: 0,
    reducers: {
        increment(state) {
            state++;
        },
        decrement(state){
            state--;
        },
    }
})
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

---

原因分析：

createSlice 里的initialState属性，只能传对象object

解决方案：

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

// 正确写法：
const counterSlice = createSlice({
    name: 'countNumTwo',
    initialState: {
        value:0
    },
    reducers: {
        increment:state=> {
            state.value+=1;
        },
        decrement:state=> {
            state.value-=1;
        },
    }
})


export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;