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

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

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

前言

在 Redux 项目中，规范化数据是管理复杂状态的关键技术之一。本文将深入探讨在 Redux 中如何高效地更新规范化数据，帮助开发者构建更可维护的状态管理方案。

什么是规范化数据？

规范化数据是指将嵌套的、冗余的数据结构转换为扁平化的形式，其中每个实体类型都有自己的"表"，通过 ID 相互引用。这种结构类似于关系型数据库的设计，具有以下优势：

避免数据重复
保持数据一致性
简化更新操作
提高查询效率

规范化数据更新的挑战

当我们需要更新规范化数据时，面临的主要挑战包括：

如何保持数据引用的完整性
如何高效地更新多个关联实体
如何确保不可变性原则不被破坏

标准更新方法

简单合并策略

最简单的更新方法是使用深度合并策略：

import merge from 'lodash/merge'

function commentsById(state = {}, action) {
  switch (action.type) {
    default: {
      if (action.entities && action.entities.comments) {
        return merge({}, state, action.entities.comments.byId)
      }
      return state
    }
  }
}

优点：

实现简单
不需要复杂的逻辑处理

缺点：

无法处理删除操作
需要提前组织好数据结构
可能造成不必要的深层复制

切片Reducer组合

更精细的控制方式是使用切片Reducer组合：

// 添加评论的action创建函数
function addComment(postId, commentText) {
  const commentId = generateId('comment')
  return {
    type: 'ADD_COMMENT',
    payload: {
      postId,
      commentId,
      commentText
    }
  }
}

// posts reducer处理逻辑
function addComment(state, action) {
  const { postId, commentId } = action.payload
  const post = state[postId]
  
  return {
    ...state,
    [postId]: {
      ...post,
      comments: post.comments.concat(commentId)
    }
  }
}

// comments reducer处理逻辑
function addCommentEntry(state, action) {
  const { commentId, commentText } = action.payload
  return {
    ...state,
    [commentId]: { id: commentId, text: commentText }
  }
}

工作流程：

生成唯一的评论ID
在posts reducer中更新对应帖子的评论ID列表
在comments reducer中创建新的评论实体

优点：

更新逻辑清晰分离
每个reducer只关心自己的数据
容易扩展和修改

缺点：

代码量相对较大
需要协调多个reducer的更新

高级更新策略

任务导向更新

对于复杂更新，可以采用任务导向的方式：

import dotProp from "dot-prop-immutable"

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

特点：

将整个更新流程集中在一个函数中
使用不可变更新工具简化嵌套更新
需要了解完整的状态结构

使用Redux-ORM

Redux-ORM提供了更高级的抽象：

// 定义模型
class Post extends Model {
  static get fields() {
    return {
      id: attr(),
      name: attr()
    }
  }
}

class Comment extends Model {
  static get fields() {
    return {
      id: attr(),
      text: attr(),
      postId: fk('Post', 'comments')
    }
  }
}

// 使用模型进行更新
function addComment(entitiesState, action) {
  const session = orm.session(entitiesState)
  session.Comment.create(action.payload)
  return session.state
}

优势：