Redux进阶系列2: 如何合理地设计State

4,032 阅读8分钟

Redux是一个非常流行的状态管理解决方案,Redux应用执行过程中的任何一个时刻,都是一个状态的反映。可以说,State 驱动了Redux逻辑的运转。设计一个好的State并非易事,本文先从设计State时最容易犯的两个错误开始介绍,然后引出如何合理地设计State。

错误1:以API为设计State的依据

以API为设计State的依据,往往是一个API对应一个子State,State的结构同API返回的数据结构保持一致(或接近一致)。例如,一个博客应用,/posts接口返回博客列表,返回的数据结构如下:

[
  {
    "id": 1,
    "title": "Blog Title",
    "create_time": "2017-01-10T23:07:43.248Z",
    "author": {
      "id": 81,
      "name": "Mr Shelby"
    }
  }
  ...
]

我们还需要查看一篇博客的详情,假设通过接口/posts/{id}获取博客详情,通过接口/posts/{id}/comments获取博客的评论,返回的数据结构如下:

{
    "id": 1,
    "title": "Blog Title",
    "create_time": "2017-01-10T23:07:43.248Z",
    "author": {
      "id": 81,
      "name": "Mr Shelby"
    },
    "content": "Some really short blog content. "
}
[
  {
    "id": 41,
    "author": "Jack",
    "create_time": "2017-01-11T23:07:43.248Z",
    "content": "Good article!"
  }
  ...
]

上面三个接口的数据分别作为3个子State,构成应用全局的State:

{
  "posts": [
    {
      "id": 1,
      "title": "Blog Title",
      "create_time": "2017-01-10T23:07:43.248Z",
      "author": {
        "id": 81,
        "name": "Mr Shelby"
      }
    },
    ...
  ],
  "currentPost": {
    "id": 1,
    "title": "Blog Title",
    "create_time": "2017-01-10T23:07:43.248Z",
    "author": {
      "id": 81,
      "name": "Mr Shelby"
    },
    "content": "Some really short blog content. "
  },
  "currentComments": [
    {
      "id": 1,
      "author": "Jack",
      "create_time": "2017-01-11T23:07:43.248Z",
      "content": "Good article!"
    },
    ...
  ]
}

这个State中,posts和currentPost存在很多重复的信息,而且posts、currentComments是数组类型的结构,不便于查找,每次查找某条记录时,都需要遍历整个数组。这些问题本质上是因为API是基于服务端逻辑设计的,而不是基于应用的状态设计的。比如,虽然获取博客列表时,已经获取了每篇博客的标题、作者等基本信息,但对于获取博客详情的API来说,根据API的设计原则,这个API依然应该包含博客的这些基本信息,而不能只是返回博客的内容。再比如,posts、currentComments之所以返回数组结构,是考虑到数据的顺序、分页等因素。

错误2:以页面UI为设计State的依据

既然不能依据API设计State,很多人又会走到另外一个反面,基于页面UI设计State。页面UI需要什么样的数据和数据格式,State就设计成什么样。我们以todo应用为例,页面会有三种状态:显示所有的事项,显然所有的已办事项和显示所有的待办事项。以页面UI为设计State的依据,那么State将是这样的:

{
  "all": [
    {
      "id": 1,
      "text": "todo 1",
      "completed": false
    },
    {
      "id": 2,
      "text": "todo 2",
      "completed": true
    }
  ],
  "uncompleted": [
    {
      "id": 1,
      "text": "todo 1",
      "completed": false
    }
  ],
  "completed": [
    {
      "id": 2,
      "text": "todo 2",
      "completed": false
    }
  ]
}

这个State对于展示UI的组件来说,使用起来非常方便,当前应用处于哪种状态,就用对应状态的数组类型的数据渲染UI,不用做任何的中间数据转换。但这种State存在的问题也很容易被发现,一是这种State依然存在数据重复的问题;二是当新增或修改一条记录时,需要修改不止一个地方。例如,当新增一条记录时,all和uncompleted这两个数组都要添加这条新增记录。这种类型的State,既会造成存储的浪费,又会存在数据不一致的风险。

这两种设计State的方式实际上是两种极端的设计方式,实际项目中,完全按照这两种方式设计State的开发者并不多,但绝大部分人都会受到这两种设计方式的影响。请回忆一下,你是否有过把某个API返回的数据原封不动的作为State的一部分?又是否有过,为了组件渲染方便,专门为某个组件的UI定义一个State?

合理设计State

下面我们来看一下应该如何合理地设计State。最重要最核心的原则是像设计数据库一样设计State。把State看做一个数据库,State中的每一部分状态看做数据库中的一张表,状态中的每一个字段对应表的一个字段。设计一个数据库,应该遵循以下三个原则:

  1. 数据按照领域(Domain)分类,存储在不同的表中,不同的表中存储的列数据不能重复。
  2. 表中每一列的数据都依赖于这张表的主键。
  3. 表中除了主键以外的其他列,互相之间不能有直接依赖关系。

这三个原则,可以翻译出设计State时的原则:

  1. 把整个应用的状态按照领域(Domain)分成若干子State,子State之间不能保存重复的数据。
  2. State以键值对的结构存储数据,以记录的key/ID作为记录的索引,记录中的其他字段都依赖于索引。
  3. State中不能保存可以通过已有数据计算而来的数据,即State中的字段不互相依赖。

按照这三个原则,我们重新设计博客应用的State。按领域划分,State可以拆分为三个子State: posts、comments、authors,posts中的记录以博客的id为key值,包含title、create_time、author、comments,同样的方式可以设计出comments、authors的结构,最终State的结构如下:

{
  "posts": {
    "1": {
      "id": 1,
      "title": "Blog Title",
      "content": "Some really short blog content.",
      "created_at": "2016-01-11T23:07:43.248Z",
      "author": 81,
      "comments": [
        352
      ]
    },
    ...
  },
  "comments": {
    "352": {
      "id": 352,
      "content": "Good article!",
      "author": 41
    },
    ...
  },
  "authors": {
    "41": {
      "id": 41,
      "name": "Jack"
    },
    "81": {
      "id": 81,
      "name": "Mr Shelby"
    },
    ...
  }
}

现在这个State看起来是不是很像有三张表的数据库呢?但这个State还有不满足应用需求的地方:键值对的存储方式无法保证博客列表数据的顺序,但对于博客列表,有序性显然是需要的。解决这个问题,我们可以通过定义另外一个状态postIds,以数组格式存储博客的id:

{
  "posts": {
    "1": {
      "id": 1,
      "title": "Blog Title",
      "content": "Some really short blog content.",
      "created_at": "2016-01-11T23:07:43.248Z",
      "author": 81,
      "comments": [
        352
      ]
    },
    ...
  },
  "postIds": [1, ...],
  "comments": {
    "352": {
      "id": 352,
      "content": "Good article!",
      "author": 41
    },
    ...
  },
  "authors": {
    "41": {
      "id": 41,
      "name": "Jack"
    },
    "81": {
      "id": 81,
      "name": "Mr Shelby"
    },
    ...
  }
}

这样,当显示博客列表时,根据postIds获取列表顺序,然后根据博客id从posts中获取博客的信息。这个地方有些同学可能有疑惑,认为posts和postIds都保存了id数据,违反了不同State间不能有重复数据的原则。但其实这并不是重复数据,postIds保存的数据是博客列表的顺序,只不过“顺序”这个数据是通过博客id来体现的。这和一张表的主键同时可以用作另外一张表的外键,是同样的道理。同样需要注意的是,当新增加一条博客时,posts和postId这两个状态都要进行修改。这看似变得麻烦,不如直接使用一个数组类型的状态操作简单,但是当需要修改某一篇博客的数据时,这种结构就有了明显的优势,而且直接使用数组保存状态,会存在对象嵌套层级过深的问题,想象下访问评论的内容,需要通过类似posts[0].comments[0].content三层结构才能获取到,当业务越复杂,这个问题越突出。扁平化的State,才具有更好的灵活性和扩展性。

截至目前为止,我们的State都是根据后台API返回的领域数据进行设计的,但实际上,应用的State,不仅包含领域数据,还需要包含应用的UI逻辑数据,例如根据当前是否正在与服务器通信,处理页面的加载效果;当应用运行出错时,需要显示错误信息等。这时,State的结构如下:

{
  "isFetching": false,
  "error": "",
  "posts": {
    ...
  },
  "postIds": [1, ...],
  "comments": {
    ...
  },
  "authors": {
    ...
  }
}

随着应用业务逻辑的增加,State的第一层级的节点也会变得越来越多。这时候我们往往会考虑合并关联性较强的节点数据,然后通过拆分reducer的方式,让每一个子reducer处理一个节点的状态逻辑。这个例子中,我们可以把posts、postIds进行合并,同时状态名做了调整,把isFetching、error作为全局的UI逻辑状态合并:

{
  "app":{
    "isFetching": false,
  	"error": "",
  },
  "posts":{
    "byId": {
      "1": {
        ...
      },
      ...
    },
    "allIds": [1, ...],
  } 
  "comments": {
    ...
  },
  "authors": {
    ...
  }
}

这样,我们就可以定义appReducer、postsReducer、commentsReducer、authorsReducer四个reducer分别处理4个子状态。至此,State的结构设计完成。

总结一下,设计Redux State的关键在于,像设计数据库一样设计State。把State看作应用在内存中的一个数据库,action、reducer等看作操作这个数据库的SQL语句。


欢迎关注我的公众号:老干部的大前端,领取21本大前端精选书籍!