如何将Redux传统Reducer改写为Redux Toolkit的createSlice格式

直接看改写后的完整代码，再对应原代码做说明：

import { configureStore, createSlice } from '@reduxjs/toolkit'

// 初始状态和原代码保持一致
const initialState = {
  sidebarShow: true
}

// 创建nav切片
const navSlice = createSlice({
  name: 'nav', // 切片名称，会作为action类型的前缀
  initialState,
  reducers: {
    // 对应原代码中'set'类型的action处理逻辑
    set: (state, action) => {
      // RTK内置的Immer允许直接修改state，无需手动写不可变更新
      Object.assign(state, action.payload)
      // 也可以写成返回新对象的形式，和原逻辑一致：return { ...state, ...action.payload }
    }
  }
})

// 导出自动生成的action creator
export const { set } = navSlice.actions

// 配置并导出store，替代原代码的combineReducers + createStore
export const store = configureStore({
  reducer: {
    nav: navSlice.reducer // 对应原rootReducer里的nav字段
  }
})

关键对应关系说明： #

• 原代码中手动编写的changeState reducer，被createSlice自动生成的navSlice.reducer替代
• 原代码中手动定义的'set' action类型，现在由RTK自动生成格式为'nav/set'的类型，不用手动维护
• 原代码中分发action的方式dispatch({ type: 'set', sidebarShow: false })，现在简化为dispatch(set({ sidebarShow: false }))
• configureStore已经默认集成了Redux DevTools、Redux Thunk等常用工具，无需额外配置，比手动用combineReducers+createStore更简洁

内容的提问来源于stack exchange，提问作者MS Karthick