TypeScript-React-Starter状态管理状态规范化：Redux中的最佳实践

姚星依Kyla

447人浏览 · 2025-10-17 04:09:30

姚星依Kyla · 2025-10-17 04:09:30 发布

TypeScript-React-Starter状态管理状态规范化：Redux中的最佳实践

【免费下载链接】TypeScript-React-Starter A starter template for TypeScript and React with a detailed README describing how to use the two together. 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-React-Starter

在React应用开发中，随着项目规模增长，状态管理变得越来越复杂。你是否遇到过状态结构混乱、数据冗余、更新不同步等问题？本文将以TypeScript-React-Starter项目为例，详细介绍如何在Redux中实现状态规范化的最佳实践，帮助你构建更健壮、可维护的应用。读完本文，你将了解状态规范化的核心概念、实现方法以及在实际项目中的应用。

状态规范化的核心概念

状态规范化是一种将复杂嵌套数据转换为扁平化结构的技术，类似于数据库的设计原则。它能解决以下问题：

避免数据冗余和不一致
提高数据访问效率
简化状态更新逻辑

在TypeScript-React-Starter项目中，Redux状态管理相关的代码主要集中在以下几个目录和文件：

状态类型定义：src/types/index.tsx
动作定义：src/actions/index.tsx
减速器：src/reducers/index.tsx

状态规范化的实现步骤

1. 设计规范化的状态结构

在传统的状态设计中，我们可能会使用嵌套结构存储相关数据。而在规范化的状态中，我们采用类似数据库的方式，将数据按照类型拆分，并使用ID进行关联。

原始状态结构（非规范化）：

interface StoreState {
  posts: {
    id: number;
    title: string;
    author: {
      id: number;
      name: string;
    };
    comments: {
      id: number;
      text: string;
    }[];
  }[];
}

规范化后的状态结构：

interface StoreState {
  posts: {
    byId: { [key: number]: Post };
    allIds: number[];
  };
  authors: {
    byId: { [key: number]: Author };
    allIds: number[];
  };
  comments: {
    byId: { [key: number]: Comment };
    allIds: number[];
  };
}

2. 实现类型定义

在TypeScript-React-Starter项目中，我们首先需要定义规范化后的状态类型。查看src/types/index.tsx文件，当前的状态类型定义如下：

export interface StoreState {
    languageName: string;
    enthusiasmLevel: number;
}

为了支持规范化状态，我们可以扩展这个定义：

// 定义实体类型
interface Post {
  id: number;
  title: string;
  authorId: number;
  commentIds: number[];
}

interface Author {
  id: number;
  name: string;
}

interface Comment {
  id: number;
  text: string;
  postId: number;
}

// 规范化的状态结构
export interface StoreState {
  languageName: string;
  enthusiasmLevel: number;
  posts: {
    byId: { [key: number]: Post };
    allIds: number[];
  };
  authors: {
    byId: { [key: number]: Author };
    allIds: number[];
  };
  comments: {
    byId: { [key: number]: Comment };
    allIds: number[];
  };
}

3. 创建规范化的动作和减速器

在src/actions/index.tsx中，我们定义了修改状态的动作。为了支持规范化状态的更新，我们需要添加相应的动作类型和创建函数。

// 添加新的动作类型
export interface AddPost {
  type: constants.ADD_POST;
  payload: Post;
}

export interface AddAuthor {
  type: constants.ADD_AUTHOR;
  payload: Author;
}

export interface AddComment {
  type: constants.ADD_COMMENT;
  payload: Comment;
}

// 更新动作联合类型
export type EnthusiasmAction = IncrementEnthusiasm | DecrementEnthusiasm | AddPost | AddAuthor | AddComment;

// 添加动作创建函数
export function addPost(post: Post): AddPost {
  return {
    type: constants.ADD_POST,
    payload: post
  };
}

export function addAuthor(author: Author): AddAuthor {
  return {
    type: constants.ADD_AUTHOR,
    payload: author
  };
}

export function addComment(comment: Comment): AddComment {
  return {
    type: constants.ADD_COMMENT,
    payload: comment
  };
}

接下来，在src/reducers/index.tsx中，我们需要更新减速器来处理这些新的动作，并维护规范化的状态：

import { EnthusiasmAction } from '../actions';
import { StoreState } from '../types/index';
import { INCREMENT_ENTHUSIASM, DECREMENT_ENTHUSIASM, ADD_POST, ADD_AUTHOR, ADD_COMMENT } from '../constants/index';

export function enthusiasm(state: StoreState, action: EnthusiasmAction): StoreState {
  switch (action.type) {
    case INCREMENT_ENTHUSIASM:
      return { ...state, enthusiasmLevel: state.enthusiasmLevel + 1 };
    case DECREMENT_ENTHUSIASM:
      return { ...state, enthusiasmLevel: Math.max(1, state.enthusiasmLevel - 1) };
    case ADD_POST:
      return {
        ...state,
        posts: {
          byId: {
            ...state.posts.byId,
            [action.payload.id]: action.payload
          },
          allIds: [...state.posts.allIds, action.payload.id]
        }
      };
    case ADD_AUTHOR:
      return {
        ...state,
        authors: {
          byId: {
            ...state.authors.byId,
            [action.payload.id]: action.payload
          },
          allIds: [...state.authors.allIds, action.payload.id]
        }
      };
    case ADD_COMMENT:
      return {
        ...state,
        comments: {
          byId: {
            ...state.comments.byId,
            [action.payload.id]: action.payload
          },
          allIds: [...state.comments.allIds, action.payload.id]
        },
        // 同时更新对应文章的commentIds
        posts: {
          ...state.posts,
          byId: {
            ...state.posts.byId,
            [action.payload.postId]: {
              ...state.posts.byId[action.payload.postId],
              commentIds: [...state.posts.byId[action.payload.postId].commentIds, action.payload.id]
            }
          }
        }
      };
    default:
      return state;
  }
}

状态规范化的实际应用

在TypeScript-React-Starter项目中，我们可以将状态规范化应用到各个组件中。例如，在src/components/Hello.tsx组件中，我们可以通过连接Redux store来获取和展示规范化后的数据。

以下是一个使用规范化状态的组件示例：

import React from 'react';
import { connect } from 'react-redux';
import { StoreState } from '../types/index';

interface Props {
  posts: {
    byId: { [key: number]: Post };
    allIds: number[];
  };
}

const PostList: React.FC<Props> = ({ posts }) => {
  return (
    <div>
      <h2>Posts</h2>
      {posts.allIds.map(postId => {
        const post = posts.byId[postId];
        return (
          <div key={postId}>
            <h3>{post.title}</h3>
            <p>Author: {post.authorId}</p>
            <h4>Comments</h4>
            <ul>
              {post.commentIds.map(commentId => (
                <li key={commentId}>{commentId}</li>
              ))}
            </ul>
          </div>
        );
      })}
    </div>
  );
};

const mapStateToProps = (state: StoreState) => ({
  posts: state.posts
});

export default connect(mapStateToProps)(PostList);

总结与展望

状态规范化是Redux中的一项重要最佳实践，它能帮助我们构建更清晰、更高效的状态管理系统。在TypeScript-React-Starter项目中，我们通过以下步骤实现了状态规范化：

设计规范化的状态结构，将嵌套数据扁平化
扩展类型定义，支持规范化状态
创建相应的动作和减速器来处理规范化状态
在组件中应用规范化状态

未来，我们可以进一步优化状态规范化的实现，例如使用normalizr库来自动处理数据规范化，或者添加更多的中间件来处理异步操作和状态验证。

通过采用状态规范化，我们的应用将更加健壮、可维护，并且能够更好地处理复杂的数据关系。希望本文介绍的最佳实践能帮助你在TypeScript-React-Starter项目中更好地实现状态管理。

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

基于BP神经网络的语音特征信号分类研究（Matlab代码实现）

语音信号分类是语音信号处理领域的核心研究方向，广泛应用于语音识别、声纹认证、语音情感分析、智能人机交互等诸多领域。由于语音信号具有非线性、时变性、随机性的复杂特征，传统分类方法难以精准挖掘语音特征与信号类别之间的关联关系，存在分类精度低、抗干扰能力弱、泛化性差等问题。BP神经网络凭借其强大的非线性映射、自适应学习和容错能力，能够有效适配复杂语音特征数据的分类任务。