您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　4.5.1 Todo状态设计

　　至于Todo应用状态，从界面上看，应用中可以有很多待办事项，并有先后顺序的关系，明显用一个数组很合适。所以，我们的状态树上应该有一个表示待办事项的数组。

　　至于每个待办事项，应该用一个对象代表，这个对象肯定要包含文字，记录待办事项的内容，因为我们可以把一个待办事项标记为“已完成”，所以还要有一个布尔字段记录是否完成的状态，当我们把一个待办事项标记为“已完成”或者“未完成”时，必须要能唯一确定一个待办事项对象，没有规则说一个待办事项的文字必须唯一，所以我们还需要一个字段来唯一标示一个待办事项，所以一个待办事项的对象格式是这样：

　　{

　　id: // 唯一标示

　　text: // 待办事项内容

　　completed: // 布尔值，标示待办事项是否已完成

　　}

　　过滤器选项设定界面上显示什么样状态的代表事项，我们已知过滤器有三种选择：

　　·全部待办事项；

　　·已完成代办事项；

　　·未完成待办事项。

　　看起来就是一个列举类型的结构，不过JavaScript里面并没有原生的enum类型支持，所以我们只能用类似常量标示符的方式来定义三种状态。在代码中，可以分别用体现语义的ALL、COMPLETED和UNCOMPLETED代表这三种状态，但是这三个标示符的实际值的选择，也值得商榷。

　　最简单的方式，就是让这三个状态标示符的值是是整形，比如这样的代码形式：

　　const ALL=0;

　　const COMPLETED=1;

　　const UNCOMPLETED=2;

　　但是，考虑到将来无论是debug还是产生log，一个数字在开发人员眼里不容易看出来代表什么意思，最后还需要对照代码才知道0代表ALL、1代表COMPLETED，这样很不方便。所以，开发中一个惯常的方法，就是把这些枚举型的常量定义为字符串，比如这样的代码：

　　const ALL = 'all';

　　const COMPLETED = 'completed';

　　const UNCOMPLETED = 'uncompleted';

　　综合起来看，我们知道Todo应用的Store状态树大概是这样一个样子，JavaScript对象的表示形式如下：

　　{

　　todos: [

　　{

　　text: 'First todo',

　　completed: false,

　　id: 0

　　},

　　{

　　text: 'Second todo',

　　completed: false,

　　id: 1

　　}

　　]

　　filter: 'all'

　　}

　　每当增加一个待办事项，就在数组类型的todos中增加一个元素，当要标记一个待办事项为“已完成”或者“未完成”，就更新对应待办事项的complete字段值，而哪些待办事项应该显示出来，则要根据todos和filter共同决定。

　　在应用的入口文件src/index.js中，我们和ControlPanel一样，用Provider包住最顶层的TodoApp模块，这样让store可以被所有组件访问到，代码如下：

　　ReactDOM.render(

　　,

　　document.getElementById('root')

　　);

　　而在顶层模块src/TodoApp.js中，所要做的只是把两个关键视图显示出来，代码如下：

　　import React from 'react';

　　import {view as Todos} from './todos/';

　　import {view as Filter} from './filter/';

　　function TodoApp() {

　　return (

　　);

　　}

　　export default TodoApp; 深入浅出React和Redux