如何使用React，Redux和Immutable.js构建todo应用程序

> React的基于组件的架构和单向数据流使其非常适合UI结构。 但是，其状态管理工具有意简单，提醒我们反应主要处理模型视图控制器（MVC）模式中的视图。虽然仅使用React构建大型应用程序是可能的，但有效的代码需要外部状态管理。>

>尽管没有官方的反应状态管理解决方案，但几个库与其范式无缝集成。本文展示了使用两个这样的库进行react构建一个简单的应用程序：redux and immable.js。

钥匙要点：

通过提供集中式状态容器和不变的数据结构，

redux and nismable.js增强了对大型应用的功能。>
• 构建一个react，redux和immutable.js todo应用程序涉及创建组件，将数据转换为不可能的js集合，定义状态启用的动作，设计还原器来处理操作并生成新状态，并通过商店和容器连接一切。
• 最初的React和Redux生态系统最初看起来很复杂，但潜在的概念对于学习其他架构和语言而言是可转移和有价值的，这对于Web开发至关重要。
• redux：集中式状态容器

> Redux的灵感来自Flux和Elm，是一个轻巧的库，充当应用程序状态的中央存储库。 它使用以下原则来控制状态的变化：

一个商店持有整个应用程序状态。

>

状态更新仅通过

>动作
1. 而不是直接突变。
Redux Store的Core是一个还原功能。此功能采用当前状态和一个操作，返回a
2. 新状态。 React组件向商店调度操作，随后会根据需要触发组件重新租赁。

immutablejs：不变的数据结构

由于Redux使用不变的数据结构强制执行此约束。 ImmuthableJs提供有效的不变收藏，并具有可变的界面，从Clojure和Scala中汲取灵感。

演示：一个简单的待办事项列表>

此示例使用React，Redux和ImmutableJS创建一个托DO列表，允许对任务进行添加和完成切换。 完整的代码可在github上找到[链接到GitHub repo将转到此处]。

设置

1. 创建一个项目文件夹，然后使用package.json。 npm init安装必要的依赖项：

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

>我们将使用JSX和ES2015，该JSX和ES2015通过WebPack与Babel编辑。 创建

：
3. webpack.config.js

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

>将构建脚本添加到

>：
4. package.json

run

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

compile。

npm run build

react组件

我们将创建两个组件：

>和

。 （在此处将插入组件代码，类似于原始输入，但可能会带有较小的调整，以确保清晰度和简洁）。 <todo></todo><todolist></todolist>redux和不变的集成

> 将虚拟数据转换为ImmutableJs集合：（将虚拟数据转换为不可能J的代码将在此处插入）。 调整组件以使用不可分割的方法（例如，

而不是

）。

动作todo.get('id') todo.id

>定义用于添加和切换todos的动作创建者：（动作创建者代码将在此处插入）。

还原器

>创建还原函数以处理操作并更新状态：（还在此处插入还原器函数的代码）。

连接组件和存储>

创建商店，并使用

：（用于连接组件的代码，包括容器和提供商在内的代码，将在此处插入。

结论

> React和Redux生态系统具有陡峭的学习曲线，但基本原理是广泛适用的。 本简介为探索类似的架构和语言奠定了基础。 对于现代网络开发人员而言，基于动作的架构和不变数据的熟练程度越来越有价值。 关于将Redux与React一起使用REDUX的FAQ

react-redux（此处将在此处添加，重新格式化以提高可读性，并可能缩短/汇总以简短）

以上是如何使用React，Redux和Immutable.js构建todo应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！