《React进阶之路》第九章示例 bbs-redux-reselect 解读

对应源码项目地址

• 托管在 github 上的项目链接：https://github.com/uncleAndyChen/react-full-stack-learning
• 托管在 gitee 上的项目链接 ：https://gitee.com/uncleAndyChen/react-full-stack-learning

能学到些啥？

作为学习的例子，只有三个页面，但是麻雀虽小，五脏俱全。通过该例子可以学习到以下知识点：

1. 项目的目录结构设计最佳实践。
2. 项目的 state 设计和模块设计技巧。
3. 异步获取 API 数据，以及将获取到的数据展示到页面上。

三个核心页面

1. 登录页面。
2. 帖子列表页面，仅展示帖子的基本信息。
3. 帖子详情页面，展示帖子的详细内容，包括用户的评论列表。

测试账号

• 该bbs内置三个用户
  • tom
  • jack
  • steve
• 密码都是：123456

state 设计

{
  app: {
    requestQuantity: 0, // 当前应用中正在进行的 API 请求数
    error: null         // 应用全局错误信息
  },
  auth: {
    userId: '59e5d570fe26fff867fc94c0', // 当前登录用户的 id
    username: 'jack'                    // 当前登录用户的用户名
  },
  ui: {
    addDialogOpen: false, // 用于新增帖子的对话框的显示状态
    editDialogOpen: false // 用于编辑帖子的对话框的显示状态
  },
  posts: {
    allIds: [],  // 维护数据的有序性
    byId: {}     // 根据 id 获取帖子的相关内容
    }
  },
  comments: {
    byPost: {
      '5c10b55d34ce789876fc00ed': [] // 帖子 id 与该帖子下的评价 id 的映射。
    },
    byId: {}                         // 根据评论 id 获取到的该条评论相关内容。
    }
  },
  users: {}
  }
}

state 解读

一共六个子 state

1. app：记录应用业务状态数据
   • requestQuantity：当前应用中正在进行的 API 请求数。
   • error：应用全局错误信息。
2. auth：登录认证状态
   • userId：当前登录用户的 id。
   • username：当前登录用户的用户名。
3. ui：UI 状态数据
   • addDialogOpen：用于新增帖子的对话框的显示状态。
   • editDialogOpen：用于编辑帖子的对话框的显示状态。
4. posts：帖子列表
   • allIds：保存帖子列表的 id，维护数据的有序性。
   • byId：以帖子 id 为 key 的列表，每一个子项为帖子的相关内容。
5. comments
   • byPost 保存以某一个帖子的 id 为 key 的、该帖子 id 下的评论列表 id，即：帖子 id 与该帖子下的评价 id 的映射。
   • byId 与 posts 下的 byId 类似，该项是以评论 id 为 key 的列表，每一个子项为评论相关的内容。
6. users：当前页面相关的用户信息列表

模块设计

对应 state 的设计，模块设计基本上也出来了，除了对应上面的六个子 state 都有相应的模块之外，还有一个 Redux 模块。

Redux 模块，位于 redux/modules 目录下，各个功能相关的 reducer、action types、action creators 都定义到一个文件中。各个功能的 reducer 又通过 redux/modules/index.js 合并成一个根 reducer，以供 react-redux 创建 store 并进行统一管理。

运行时数据

首页，即帖子列表页面

看一下运行起来的 state，仅保留了两篇帖子的数据。

{
  app: {
    requestQuantity: 0,
    error: null
  },
  auth: {
    userId: '59e5d570fe26fff867fc94c0',
    username: 'jack'
  },
  ui: {
    addDialogOpen: false,
    editDialogOpen: false
  },
  posts: {
    allIds: [
      '5c10b579a41380ad2bf95cfd',
      '5c0f145bd76a23857943793c'
    ],
    byId: {
      '5c10b579a41380ad2bf95cfd': {
        id: '5c10b579a41380ad2bf95cfd',
        title: 'fs',
        vote: 0,
        updatedAt: '2018-12-12T07:16:10.863Z',
        author: '59e5d570fe26fff867fc94c0'
      },
      '5c0f145bd76a23857943793c': {
        id: '5c0f145bd76a23857943793c',
        title: '',
        vote: 0,
        updatedAt: '2018-12-11T01:35:23.187Z',
        author: '59e5d570fe26fff867fc94c0'
      }
    }
  },
  comments: {
    byPost: {},
    byId: {}
  },
  users: {
    '59e5d22f6722f75272b3bbcf': {
      id: '59e5d22f6722f75272b3bbcf',
      username: 'tom'
    },
    '59e5d570fe26fff867fc94c0': {
      id: '59e5d570fe26fff867fc94c0',
      username: 'jack'
    }
  }
}

帖子详情页面

再看有三条评论的帖子，进入详情页面时，state 的内容。帖子是 jack 发的，三条评论都是 tom 发的，所以users有两个用户的信息。

{
  app: {
    requestQuantity: 0,
    error: null
  },
  auth: {
    userId: '59e5d570fe26fff867fc94c0',
    username: 'jack'
  },
  ui: {
    addDialogOpen: false,
    editDialogOpen: false
  },
  posts: {
    allIds: [],
    byId: {
      '5c10b55d34ce789876fc00ed': {
        id: '5c10b55d34ce789876fc00ed',
        title: 'asd',
        content: 'ads',
        vote: 0,
        updatedAt: '2018-12-12T07:14:37.395Z',
        author: '59e5d570fe26fff867fc94c0'
      }
    }
  },
  comments: {
    byPost: {
      '5c10b55d34ce789876fc00ed': [
        '5c1215a60dbbbd7c0a640389',
        '5c12159eb50852373a0d1a9e',
        '5c12151f9536aad30f94f59f'
      ]
    },
    byId: {
      '5c1215a60dbbbd7c0a640389': {
        id: '5c1215a60dbbbd7c0a640389',
        content: 'sadf',
        updatedAt: '2018-12-13T08:17:42.783Z',
        author: '59e5d22f6722f75272b3bbcf'
      },
      '5c12159eb50852373a0d1a9e': {
        id: '5c12159eb50852373a0d1a9e',
        content: 'sad',
        updatedAt: '2018-12-13T08:17:34.272Z',
        author: '59e5d22f6722f75272b3bbcf'
      },
      '5c12151f9536aad30f94f59f': {
        id: '5c12151f9536aad30f94f59f',
        content: 'sa',
        updatedAt: '2018-12-13T08:15:27.067Z',
        author: '59e5d22f6722f75272b3bbcf'
      }
    }
  },
  users: {
    '59e5d570fe26fff867fc94c0': {
      id: '59e5d570fe26fff867fc94c0',
      username: 'jack'
    },
    '59e5d22f6722f75272b3bbcf': {
      id: '59e5d22f6722f75272b3bbcf',
      username: 'tom'
    }
  }
}

对应源码结构（模块设计）

源码结构与state设计是相辅相成的。

│  index.js
│
├─components // 全局通用组件
│  ├─Header
│  │      index.js
│  │      style.css
│  │
│  ├─Loading
│  │      index.js
│  │      style.css
│  │
│  └─ModalDialog
│          index.js
│          style.css
│
├─containers
│  ├─App
│  │      index.js
│  │
│  ├─Home
│  │      index.js
│  │
│  ├─Login
│  │      index.js
│  │      style.css
│  │
│  ├─Post
│  │  │  index.js // Post 容器组件
│  │  │  style.css
│  │  │
│  │  └─components // Post 专用组件
│  │      ├─CommentList
│  │      │      index.js
│  │      │      style.css
│  │      │
│  │      ├─CommentsView
│  │      │      index.js
│  │      │      style.css
│  │      │
│  │      ├─PostEditor
│  │      │      index.js
│  │      │      style.css
│  │      │
│  │      └─PostView
│  │              index.js
│  │              style.css
│  │
│  └─PostList
│      │  index.js // PostList 容器组件
│      │  style.css
│      │
│      └─components // PostList 专用组件
│          ├─PostItem
│          │      index.js
│          │      style.css
│          │
│          └─PostsView
│                  index.js
│
├─images
│      like-default.png
│      like.png
│
├─redux
│  │  configureStore.js
│  │
│  └─modules
│          app.js
│          auth.js
│          comments.js
│          index.js  // Redux 的根模块，仅将其余模块的 reducer 合并成一个根 reducer。
│          posts.js
│          ui.js
│          users.js
│
└─utils
        AsyncComponent.js
        connectRoute.js
        date.js
        request.js  // 对 fetch 的封装
        SHA1.js
        url.js  // API 配置

关于目录结构设计的最佳实践，请看：React+Redux工程目录结构，最佳实践

redux 模块

redux 模块，指的是在 redux/modules 下定义的模块。

一个 redux 模块，不仅包含 action types、action creators、reducers，还包含从该模块获取 state 数据的 selectors 函数。

selectors 函数的使命：

• 封装：对外提供数据接口，外部调用者不需要知道内部实现细节，也不用关心内部 state 的具体结构。
• 解耦：内部 state 结构如果有变化，修改对外接口即可，不会影响到外部调用方，降低模块间依赖关系，最大限度解耦。

全局 selector 函数

当需要从多个模块的 state 中获取数据时，最好的做法，是在 redux/module/index.js 文件中定义全局 selector 函数，该 selector 再通过各个模块的 selector 获取需要的数据。这样，容器组件通过调用全局 selector 函数，可以非常便利地对全局数据进行处理。

《React进阶之路》第九章示例原书代码

• bbs-redux-reselect