作为学习的例子，只有三个页面，但是麻雀虽小，五脏俱全。

能学到些啥？

通过该例子可以学习到以下知识点：

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

对应源码项目地址

克隆时，通过参数 -b 指定该分支：

1
git clone -b bbs-apicloud https://github.com/uncleAndyChen/react-full-stack-learning.git

三个核心页面

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

测试账号

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

state 设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  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，仅保留了两篇帖子的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{
  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有两个用户的信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
{
  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设计是相辅相成的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
│  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进阶之路》第九章示例原书代码