Redux Toolkit 迁移指南：从传统 Redux 到现代 Redux 实践

Redux Toolkit 迁移指南：从传统 Redux 到现代 Redux 实践

redux-toolkit The official, opinionated, batteries-included toolset for efficient Redux development 项目地址: https://gitcode.com/gh_mirrors/re/redux-toolkit

Redux 作为 React 生态中最流行的状态管理方案，自 2015 年诞生以来已经经历了多次范式演进。本文将带你深入了解如何将传统的 Redux 代码迁移到基于 Redux Toolkit 的现代 Redux 实践。

为什么需要迁移到现代 Redux

传统 Redux 代码通常存在以下问题：

• 需要手动编写大量样板代码（action types、action creators、reducers）
• 状态更新逻辑复杂且容易出错
• 配置 store 过程繁琐
• 异步处理需要额外中间件

Redux Toolkit（简称 RTK）是官方推荐的现代 Redux 开发方式，它通过一系列工具函数简化了 Redux 的使用，同时保留了 Redux 的核心概念和优势。

迁移策略概述

迁移工作可以分阶段进行，新旧代码可以共存：

1. 首先替换 store 配置
2. 逐步迁移 reducer 和 action
3. 替换数据获取逻辑
4. 更新 React 组件

第一步：Store 配置现代化

传统 Redux store 配置通常包含多个步骤：

// 传统配置方式
import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunk from 'redux-thunk'

const rootReducer = combineReducers({
  posts: postsReducer,
  users: usersReducer
})

const store = createStore(rootReducer, applyMiddleware(thunk))

使用 Redux Toolkit 的 configureStore 可以简化为：

// 现代配置方式
import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
  reducer: {
    posts: postsReducer,
    users: usersReducer
  }
})

configureStore 自动完成了以下工作：

• 组合 reducers
• 添加 Redux Thunk 中间件
• 设置开发工具
• 添加不可变状态检查
• 添加序列化检查

第二步：Reducer 和 Action 现代化

传统 Redux 通常将相关代码分散在多个文件中：

// constants/todos.js
export const ADD_TODO = 'ADD_TODO'

// actions/todos.js
export const addTodo = (text) => ({
  type: ADD_TODO,
  text
})

// reducers/todos.js
export default function todosReducer(state = [], action) {
  switch(action.type) {
    case ADD_TODO:
      return [...state, { text: action.text }]
    default:
      return state
  }
}

使用 createSlice 可以大幅简化：

// features/todos/todosSlice.js
import { createSlice } from '@reduxjs/toolkit'

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    todoAdded(state, action) {
      // 使用 Immer，可以直接"修改"state
      state.push({ text: action.payload })
    }
  }
})

export const { todoAdded } = todosSlice.actions
export default todosSlice.reducer

createSlice 的优势：

• 自动生成 action creators
• 自动处理 action types
• 使用 Immer 简化不可变更新
• 将相关代码集中管理

第三步：数据获取现代化

传统 Redux 数据获取通常需要：

• 多个 action types
• 多个 action creators
• 异步中间件（如 redux-thunk）
• reducer 处理加载状态

// 传统数据获取
export const fetchPosts = () => async (dispatch) => {
  dispatch(fetchPostsStarted())
  try {
    const posts = await api.getPosts()
    dispatch(fetchPostsSucceeded(posts))
  } catch (err) {
    dispatch(fetchPostsFailed(err))
  }
}

使用 RTK Query 可以简化为：

// apiSlice.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts'
    })
  })
})

export const { useGetPostsQuery } = apiSlice

RTK Query 的优势：

• 自动生成 hooks
• 自动管理加载状态
• 请求去重和缓存
• 减少样板代码

第四步：React 组件现代化

传统 React-Redux 使用 connect：

// 传统连接方式
const mapState = (state) => ({
  posts: state.posts
})

const mapDispatch = { fetchPosts }

export default connect(mapState, mapDispatch)(PostsList)

现代方式使用 hooks：

// 现代 hooks 方式
import { useSelector, useDispatch } from 'react-redux'
import { fetchPosts } from './postsSlice'

function PostsList() {
  const posts = useSelector(state => state.posts)
  const dispatch = useDispatch()
  
  useEffect(() => {
    dispatch(fetchPosts())
  }, [dispatch])
  
  // 渲染逻辑
}

或者结合 RTK Query 更简单：

function PostsList() {
  const { data: posts, isLoading } = useGetPostsQuery()
  
  if (isLoading) return <div>Loading...</div>
  
  // 渲染逻辑
}

迁移中的注意事项

1. 渐进式迁移：不需要一次性重写所有代码，可以逐个功能迁移
2. 类型安全：如果使用 TypeScript，现代 Redux 提供了更好的类型推断
3. 中间件兼容：大多数 Redux 中间件可以与 RTK 一起工作
4. 性能考量：RTK Query 的缓存机制可以提升应用性能

总结

迁移到现代 Redux 可以带来以下好处：

• 代码量减少 50-75%
• 更易于维护和理解
• 更好的开发体验
• 更强的类型安全（TypeScript）
• 更佳的性能

通过遵循本文的迁移策略，你可以逐步将现有 Redux 代码库现代化，同时保持应用的正常运行。Redux Toolkit 提供的工具集让 Redux 开发重新变得简单而高效。

redux-toolkit The official, opinionated, batteries-included toolset for efficient Redux development 项目地址: https://gitcode.com/gh_mirrors/re/redux-toolkit