03-状态的结构与初始状态

11.1.1　状态的结构与初始状态

reducer即将开始处理单个Redux store的修改，因此是时候讨论一下采用什么结构的store。设计任何应用程序的状态结构即会影响应用UI的工作方式，也会受应用UI工作方式的影响，但是通常最好将“原始”数据与UI数据尽可能地分离。一种方式是将诸如ID之类的数据与其对应的数据分开存储，并使用ID来查询数据。

我们将创建一个初始状态文件来帮助确定状态的形式和结构。在constants目录中，创建一个名为initialState.js的文件。这将是任何action被派发或任何更改发生之前Redux应用的状态。这个状态文件将包含有关错误和“加载中”状态的信息，以及关于帖子、评论和用户的一些信息。我们将在数组中存储评论和帖子的ID，并将这些ID对应的主要信息存储在可以轻松引用的对象中。代码清单11-1展示了设置初始状态的示例。

代码清单11-1　初始状态以及状态结构（src/constants/initialState.js）

export default {  ⇽--- Redux用作其初始状态的对象
    error: null,
    loading: false,
    postIds: [],  ⇽--- 将评论ID和帖子ID与实际数据分开存储
    posts: {},
    commentIds: [],
    comments: {},
    pagination: {
        first: `${process.env  ⇽--- 存储分页链接（通过HTTP头接收）——这只是众多分页实现方式的一种
            .ENDPOINT}/posts?_page=1&_sort=date&_order=DESC&
    _embed=comments&_expand=user&_embed=likes`,  ⇽--- 存储分页链接（通过HTTP头接收）——这只是众多分页实现方式的一种
        next: null,
        prev: null,
        last: null
    },
    user: {  ⇽--- 存储用户身份验证状态信息
        authenticated: false,
        profilePicture: null,
        id: null,
        name: null,
        token: null
    }
};