对应源码项目地址
- 托管在 github 上的项目链接：https://github.com/uncleAndyChen/react-full-stack-learning
- 托管在 gitee 上的项目链接 ：https://gitee.com/uncleAndyChen/react-full-stack-learning
能学到些啥？
作为学习的例子，只有三个页面，但是麻雀虽小，五脏俱全。通过该例子可以学习到以下知识点：
- 项目的目录结构设计最佳实践。
- 项目的 state 设计和模块设计技巧。
- 异步获取 API 数据，以及将获取到的数据展示到页面上。
三个核心页面
- 登录页面。
- 帖子列表页面，仅展示帖子的基本信息。
- 帖子详情页面，展示帖子的详细内容，包括用户的评论列表。
测试账号
- 该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
- app：记录应用业务状态数据
- requestQuantity：当前应用中正在进行的 API 请求数。
- error：应用全局错误信息。
- auth：登录认证状态
- userId：当前登录用户的 id。
- username：当前登录用户的用户名。
- ui：UI 状态数据
- addDialogOpen：用于新增帖子的对话框的显示状态。
- editDialogOpen：用于编辑帖子的对话框的显示状态。
- posts：帖子列表
- allIds：保存帖子列表的 id，维护数据的有序性。
- byId：以帖子 id 为 key 的列表，每一个子项为帖子的相关内容。
- comments
- byPost 保存以某一个帖子的 id 为 key 的、该帖子 id 下的评论列表 id，即：帖子 id 与该帖子下的评价 id 的映射。
- byId 与 posts 下的 byId 类似，该项是以评论 id 为 key 的列表，每一个子项为评论相关的内容。
- 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 函数，可以非常便利地对全局数据进行处理。
网友评论