使用 Redux 秒做 todo-list 应用

原文： https://log.zvz.im/2016/10/13/build-todo-app/

React 采用组件和单向数据流的方式完美地解决了用户界面的构建问题，不过它所用于处理状态的工具设计得太简单了，感觉就是故意的；也可能是为了强调 React 只是对应传统的 MVC 架构中 View 的部分。

作者认为

没有什么能够阻止我们用 React 来构建越来越大的应用，但是很快我们就会发现，想要保持代码简单，我们到处都需要进行状态的管理。

尽管没有官方的解决方案，但是仍然有不少代码库依照 React 的设计理念解决了状态管理的问题。今天我们就要介绍两个这样的类库，并使用它们构建一个简单的小应用。

Redux

Redux 是一个极精简的库，它融合了 Flux 和 Elm 的设计理念，为应用状态提供容器功能。我们可以使用 Redux 管理任何应用的状态，使我们遵守以下准则：

状态（ status ）都保存在同一个存储（ store ）中；
动作（ action ）才能改变状态，状态不能直接被修改；

Redux 存储的核心是一个函数，它将当前应用的状态和动作结合起来，创建应用的新状态。我们将这个函数称为 reducer。

我们的 React 组件负责向我们的存储发送动作，相应地存储通知组件何时需要重绘。

ImmutableJS

由于 Redux 不允许直接对应用的状态做修改，所以使用不可修改数据作为应用状态，可以禁止对状态的修改，就显得非常好用了。

ImmutableJS 为我们提供了许多的不可修改的数据结构，以及对应的修改操作接口，其实现方式参考了 Clojure 和 Scala 中的现实，有很高的代码效率。

示例

接下来，我们将使用 React 、 Redux 和 ImmutableJS 来创建一个简单的待办事项列表，它允许我们添加待办事项，且能够切换事项完成状态。

你可以去 CodePen 看 SitePoint （@SitePoint ）实现的一个 React, Redux & Immutable Todo 应用。

也可以去 GitHub 上下载相应的代码。

准备工作

我们从建立项目文件目录开始，然后使用 npm init 指令初始化一个 package.json 文件。然后我们开始安装我们需要的依赖库。

npm install --save react react-dom redux react-redux immutable
npm install --save-dev webpack babel-loader babel-preset-es2015 babel-preset-react

我们使用 JSX 和 ES2015 的语法，所以我们会在 Webpack 进行模块绑定时，用 Babel 来编译我们的代码。

首先，我们新建一个 Webpack 的配置文件 webpack.config.js。

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: { presets: [ 'es2015', 'react' ]}
      }
    ]
  }
};

然后我们需要扩充一下我们的 package.json 文件，加入一行 npm 脚本用来编译我们的代码。

"script": {
  "build": "webpack --debug"
}

当我们需要编译代码时，只要执行一次 npm run build 命令即可。

查看完整版：使用 Redux 秒做 todo-list 应用