使用Redux Toolkit的createSlice重构Alert功能Redux代码求助

以下是和你原有逻辑完全等价的重构后代码：

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

const alertSlice = createSlice({
  // 唯一标识slice的名称，会作为自动生成的action type前缀
  name: 'alerts',
  initialState: [],
  reducers: {
    // 对应原SET_ALERT逻辑
    addAlert: (state, action) => {
      // RTK内置Immer，可直接修改state，无需手动返回新数组
      state.push(action.payload)
    },
    // 对应原REMOVE_ALERT逻辑
    removeAlert: (state, action) => {
      // 过滤类操作直接返回新数组即可
      return state.filter(alert => alert.id !== action.payload)
    }
  }
})

// 导出自动生成的同步action creator
export const { addAlert, removeAlert } = alertSlice.actions

// 异步thunk逻辑和原有实现完全一致，仅替换dispatch的action为自动生成的版本
export const setAlert = (msg, alertType, timeout = 5000) => (dispatch) => {
  const id = nanoid()
  dispatch(addAlert({ msg, alertType, id }))
  setTimeout(() => dispatch(removeAlert(id)), timeout)
}

// 导出reducer供store配置使用
export default alertSlice.reducer

核心说明：

• 不需要手动定义action type常量，createSlice会根据name配置和reducer名称自动生成唯一的action type
• 所有同步状态更新逻辑都收敛在slice的reducers配置中，代码结构更清晰
• 异步thunk属于业务逻辑，不需要写入slice配置，直接调用生成的同步action即可复用原有异步逻辑
• 对外暴露的接口和原有代码完全一致，无需修改项目中其他调用alert相关逻辑的代码

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