Redux 项目中规范化数据更新的最佳实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01052/article/details/148324329

Redux 项目中规范化数据更新的最佳实践

redux 项目地址: https://gitcode.com/gh_mirrors/red/redux

前言

在 Redux 项目中，规范化数据结构是管理复杂状态的关键技术。然而，如何高效地更新这些规范化数据却是一个常见挑战。本文将深入探讨 Redux 中更新规范化数据的多种策略，帮助开发者选择最适合自己项目的方案。

规范化数据回顾

规范化数据是指将嵌套的、关系型的数据结构转换为扁平化的形式，通常包含：

通过 ID 索引的实体集合
维护实体 ID 的顺序列表
实体间的引用通过 ID 而非嵌套对象实现

这种结构虽然提高了查询效率，但也带来了更新复杂性的问题。

基础更新策略

简单合并策略

最直接的更新方式是使用深度合并函数：

import merge from 'lodash/merge'

function commentsReducer(state = {}, action) {
  if (action.entities && action.entities.comments) {
    return merge({}, state, action.entities.comments.byId)
  }
  return state
}

优点：

实现简单
适合批量更新场景

缺点：

无法处理删除操作
要求动作创建者预先组织好数据结构

切片Reducer组合策略

更精细的控制方式是为每个实体类型创建独立的切片Reducer：

// postsReducer.js
function addComment(state, action) {
  const { postId, commentId } = action.payload
  return {
    ...state,
    [postId]: {
      ...state[postId],
      comments: [...state[postId].comments, commentId]
    }
  }
}

// commentsReducer.js
function addCommentEntry(state, action) {
  const { commentId, commentText } = action.payload
  return {
    ...state,
    [commentId]: { id: commentId, text: commentText }
  }
}

工作流程：

动作分发时携带完整上下文信息
各切片Reducer只处理自己负责的数据部分
组合Reducer确保状态整体一致性

适用场景：

需要精确控制更新逻辑
系统模块化程度高
更新操作涉及多个实体类型

高级更新模式

任务导向更新

对于复杂业务逻辑，可以采用面向任务的更新方式：

import dotProp from 'dot-prop-immutable'

function addComment(state, action) {
  const { postId, commentId } = action.payload
  return dotProp.set(
    dotProp.set(
      state,
      `posts.byId.${postId}.comments`,
      comments => [...comments, commentId]
    ),
    `comments.byId.${commentId}`,
    { id: commentId, text: action.payload.commentText }
  )
}

特点：

逻辑集中，便于理解完整业务流程
需要了解完整状态树结构
适合业务逻辑复杂的场景

使用Redux-ORM

Redux-ORM提供了声明式的数据建模方式：

class Post extends Model {
  static reducer(action, Post, session) {
    switch(action.type) {
      case 'ADD_COMMENT':
        const post = Post.withId(action.payload.postId)
        post.comments.add(action.payload)
        break
    }
  }
}

核心优势：