Redux Slice示例无法运行：状态不递增问题求助

你的代码存在两个关键问题导致状态无法递增：

1. 未通过store.dispatch触发action #

调用increment()只是生成了一个action对象，但Redux必须通过store.dispatch()将这个action发送到store，才会触发对应的reducer执行。你目前只是调用了action创建函数，没有把它派发给store，所以reducer完全没运行。

2. increment reducer未返回新状态 #

你的increment reducer里，state + 1仅完成了加法运算，但没有返回运算结果。由于你的状态是数字（原始类型），Redux Toolkit的reducer如果采用返回新状态的写法，必须明确返回新值；如果是对象类型可以直接修改状态，但原始类型必须返回新值，否则状态不会更新。

修正后的代码 #

counterSlice.ts

/* counterSlice.ts */
import { createSlice } from 'npm:@reduxjs/toolkit@2.2.4'

// 无需手动指定CounterSlice类型，createSlice会自动推导类型
const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state, action) => {
      console.log('increment')
      // 返回新的状态值
      return state + 1
    },
    decrement: (state, action) => state - 1,
  },
})

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

index.ts

/* index.ts */
import { configureStore } from 'npm:@reduxjs/toolkit@2.2.4'
import counterReducer from './counterSlice.ts'
import { increment, decrement } from './counterSlice.ts'

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

console.log(store.getState()) // { counter: 0 }
// 通过dispatch发送action，触发reducer执行
store.dispatch(increment())
console.log(store.getState()) // { counter: 1 }

内容的提问来源于stack exchange，提问作者Mark Tyers