《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

你可能感兴趣的:(《React进阶之路》第九章示例 bbs-redux-reselect 解读)