如何在Redux Toolkit的createSlice中自定义action type拼接格式

核心原因 #

Redux Toolkit 内置的createSlice默认硬编码了${sliceName}/${reducerName}的action type拼接规则，斜杠是内部自动生成的，仅修改slice的name属性无法去掉多余斜杠。

可行实现方案 #

方案1：自定义包装createSlice（全量适配场景） #

适合所有slice内的action都需要统一自定义格式的场景，和原生createSlice用法完全兼容，不需要修改原有业务代码：

• 实现自定义包装函数

import { createSlice as originalCreateSlice } from '@reduxjs/toolkit'

const customCreateSlice = (options) => {
  const { name, reducers, ...rest } = options
  const slice = originalCreateSlice({ name, reducers, ...rest })

  // 替换所有action的type为目标格式
  Object.keys(slice.actions).forEach(reducerKey => {
    slice.actions[reducerKey].type = `[${name}] ${reducerKey}`
  })

  // 重写reducer匹配逻辑，适配新的action type
  const customReducerMap = Object.fromEntries(
    Object.entries(slice.caseReducers).map(([reducerKey, handler]) => [
      `[${name}] ${reducerKey}`,
      handler
    ])
  )

  const wrappedReducer = (state, action) => {
    if (customReducerMap[action.type]) {
      return customReducerMap[action.type](state, action)
    }
    return slice.reducer(state, action)
  }
  slice.reducer = wrappedReducer

  return slice
}

• 使用示例

const userSlice = customCreateSlice({
  name: 'user',
  initialState: { info: null },
  reducers: {
    setUserInfo: (state, action) => {
      state.info = action.payload
    }
  }
})

// 输出结果为 [user] setUserInfo，符合需求
console.log(userSlice.actions.setUserInfo.type)

方案2：手动创建action + extraReducers（少量自定义场景） #

仅个别action需要自定义格式时可以用该方案，不需要修改createSlice逻辑：

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

// 手动定义符合格式要求的action
const setUserInfo = createAction('[user] setUserInfo')

const userSlice = createSlice({
  name: 'user',
  initialState: { info: null },
  extraReducers: builder => {
    builder.addCase(setUserInfo, (state, action) => {
      state.info = action.payload
    })
  }
})

export { setUserInfo }
export default userSlice.reducer

内容的提问来源于stack exchange，提问作者Никита Толстиков