Redux Toolkit如何创建多个createSlice并正确配置store

之前合并切片失效的核心原因 #

你之前手动用combineReducer合并切片后无法运行，基本是两类问题导致：

• 拆分后状态访问路径变化：单切片直接挂载时所有状态都在根state下，合并后需要通过[切片命名空间].[状态名]的路径取值，没有同步修改useSelector的取值逻辑就会拿不到对应状态
• 合并配置错误：手动合并时传入的reducer key和切片name字段不匹配，或者dispatch时引用了错误切片的action，导致action无法被对应reducer捕获

注意：Redux Toolkit的configureStore本身支持直接传入reducer映射对象，内部会自动完成合并，不需要额外手动调用combineReducers，能减少很多配置错误。

按模块拆分后的完整代码 #

按照职责把原来混在单个auth切片里的逻辑拆成「认证」「文件上传校验」「帖子」三个独立切片，代码如下：

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

// 认证模块切片：只处理登录态、用户信息、登录报错相关逻辑
const authSlice = createSlice({
  name: "auth",
  initialState: {
    currentUser: null,
    isLoggedIn: false,
    error: false
  },
  reducers: {
    login(state, action) {
      state.isLoggedIn = true
      state.error = false
      state.currentUser = action.payload
    },
    logout(state) {
      // 不要在reducer里直接操作localStorage，reducer必须是纯函数
      // localStorage.removeItem("userId") 这段逻辑挪到调用logout action的业务代码里执行
      state.isLoggedIn = false
      state.currentUser = null
    },
    loginFailure: (state) => {
      state.error = true
    }
  }
})

// 文件上传校验模块切片：单独处理必填文件的校验状态
const uploadSlice = createSlice({
  name: "upload",
  initialState: {
    missingFile: false // 初始值统一用布尔值，和后续赋值类型保持一致，避免null带来的判断异常
  },
  reducers: {
    setFileMissing(state) {
      state.missingFile = true
    },
    setFileUploaded(state) {
      state.missingFile = false
    }
  }
})

// 帖子模块切片：单独处理帖子列表、点赞交互相关逻辑
const postSlice = createSlice({
  name: "posts",
  initialState: {
    list: []
  },
  reducers: {
    setPostList(state, action) {
      state.list = action.payload
    },
    // 新增专用的点赞action，不需要每次点赞都全量替换整个帖子列表，减少不必要的组件重渲染
    togglePostLike(state, action) {
      const { postId, likeCount, isLiked } = action.payload
      const targetPost = state.list.find(post => post.id === postId)
      if (targetPost) {
        targetPost.likeCount = likeCount
        targetPost.isLiked = isLiked
      }
    }
  }
})

// 统一导出各模块的action
export const authActions = authSlice.actions
export const uploadActions = uploadSlice.actions
export const postActions = postSlice.actions

// 配置store，直接传入reducer映射对象即可，RTK自动完成合并
export const store = configureStore({
  reducer: {
    auth: authSlice.reducer,
    upload: uploadSlice.reducer,
    posts: postSlice.reducer
  }
})

额外优化提示 #

• 关于文件上传必填校验：不需要强行给上传器组件加required属性，在表单提交的逻辑里先读取state.upload.missingFile状态，如果为true就直接阻断提交、弹出提示即可，自定义校验的灵活度比原生属性更高
• 所有reducer必须保持纯函数，不要在reducer里写localStorage操作、接口请求这类带副作用的逻辑，这类逻辑要挪到组件事件、thunk或者listener中间件里执行
• 拆分切片后，组件里读取状态的路径要同步更新，比如登录状态从原来的state.isLoggedIn改成state.auth.isLoggedIn，文件校验状态从state.missingFile改成state.upload.missingFile，帖子列表从state.posts改成state.posts.list

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