Redux 标准模式详解：提升应用开发效率的关键实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00574/article/details/148324051

Redux 标准模式详解：提升应用开发效率的关键实践

redux reduxjs/redux: Redux 是一个用于 JavaScript 的状态管理库，可以用于构建复杂的前端应用程序，支持多种状态管理和数据流模式，如 Flux，MVC，MVVM 等。项目地址: https://gitcode.com/gh_mirrors/re/redux

Redux 是一个强大的状态管理库，但在实际应用中，我们需要遵循一些标准模式来确保代码的可维护性和性能。本文将深入探讨 Redux 应用中最常用的几种标准模式，帮助你理解它们的价值并掌握使用方法。

为什么需要标准模式

在 Redux 基础概念之上，开发者社区形成了一系列被广泛采用的最佳实践。这些模式并非强制要求，但它们解决了实际开发中的常见问题：

提高代码的可维护性和一致性
优化性能
简化复杂状态管理
促进团队协作

核心模式解析

1. Action Creators（动作创建器）

问题：直接在代码中编写动作对象会导致重复代码，难以维护。

解决方案：使用函数封装动作创建过程。

// 原始方式
dispatch({ type: 'todos/todoAdded', payload: 'Buy milk' })

// 使用动作创建器
const todoAdded = text => ({
  type: 'todos/todoAdded',
  payload: text
})

dispatch(todoAdded('Buy milk'))

优势：

避免硬编码动作类型
集中处理动作创建逻辑
便于重用和测试

实际应用：

// 在slice文件中定义动作创建器
export const todoAdded = todo => ({
  type: 'todos/todoAdded',
  payload: todo
})

// 在组件中使用
import { todoAdded } from './todosSlice'
dispatch(todoAdded(newTodo))

2. Memoized Selectors（记忆化选择器）

问题：派生数据计算可能导致不必要的组件重渲染。

解决方案：使用 Reselect 库创建记忆化选择器。

import { createSelector } from 'reselect'

// 基本选择器
const selectTodos = state => state.todos

// 记忆化派生选择器
export const selectTodoIds = createSelector(
  selectTodos,
  todos => todos.map(todo => todo.id)
)

工作原理：

接收一个或多个输入选择器
只有输入值变化时才重新计算
缓存计算结果

性能优化：

// 复杂过滤选择器示例
export const selectFilteredTodos = createSelector(
  selectTodos,
  state => state.filters,
  (todos, filters) => {
    // 复杂的过滤逻辑
    return filteredTodos
  }
)

3. 规范化状态结构

问题：嵌套或重复的数据结构难以更新和维护。

解决方案：采用数据库式的规范化结构。

{
  todos: {
    ids: [1, 2, 3],
    entities: {
      1: { id: 1, text: "Buy milk", completed: false },
      2: { id: 2, text: "Write blog post", completed: true },
      3: { id: 3, text: "Study Redux", completed: false }
    }
  }
}

优势：

避免数据重复
更新更简单直接
便于通过ID查找

4. 异步请求状态跟踪

问题：需要清晰表示API请求的不同状态。

解决方案：使用枚举值跟踪请求状态。

const initialState = {
  status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed'
  error: null
}

典型流程：

派发 'loading' 动作
发起API请求
根据结果派发 'succeeded' 或 'failed' 动作

5. Thunks 与 Promises 结合

问题：如何处理复杂的异步逻辑。

解决方案：使用Redux Thunk中间件。

export const fetchTodos = () => async dispatch => {
  try {
    dispatch(todosLoading())
    const response = await api.getTodos()
    dispatch(todosLoaded(response.data))
  } catch (err) {
    dispatch(todosFailed(err.message))
  }
}

最佳实践：

封装API调用
统一错误处理
提供加载状态

模式组合应用示例

将上述模式组合起来创建一个完整的todo功能：

// todosSlice.js
import { createSelector } from 'reselect'

// 动作创建器
export const todoAdded = todo => ({
  type: 'todos/todoAdded',
  payload: todo
})

export const todosLoading = () => ({ type: 'todos/loading' })

// 异步Thunk
export const fetchTodos = () => async dispatch => {
  dispatch(todosLoading())
  const response = await api.getTodos()
  dispatch(todosLoaded(response.data))
}

// 记忆化选择器
export const selectTodoEntities = state => state.todos.entities

export const selectTodoIds = createSelector(
  selectTodoEntities,
  entities => Object.keys(entities).map(Number)
)

export const selectTodoById = (state, id) => selectTodoEntities(state)[id]