Redux 中文文档

    Redux 是 JavaScript 状态容器,提供可预测化的状态管理。
    (如果你需要一个 WordPress 框架,请查看 。)

    可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。不仅于此,它还提供
    超爽的开发体验,比如有一个时间旅行调试器可以编辑后实时预览

    Redux 除了和 一起用外,还支持其它界面库。
    它体小精悍(只有2kB,包括依赖)。

    开始之前

    开发经历

    Redux 的开发最早开始于我在准备 React Europe 演讲热加载与时间旅行的时候,当初的目标是创建一个状态管理库,来提供最简化 API,但同时做到行为的完全可预测,因此才得以实现日志打印,热加载,时间旅行,同构应用,录制和重放,而不需要任何开发参与。

    启示

    Redux 由 演变而来,但受 Elm 的启发,避开了 Flux 的复杂性。
    不管你有没有使用过它们,只需几分钟就能上手 Redux。

    安装稳定版:

    以上基于使用 来做包管理工具的情况下。

    否则你可以直接在 unpkg 上访问这些文件,下载下来,或者把让你的包管理工具指向它。

    一般情况下人们认为 Redux 就是一些 模块的集合。这些模块就是你在使用 Webpack、、或者 Node 环境时引入的。如果你想追求时髦并使用 Rollup,也是支持的。

    你也可以不使用模块打包工具。 的 npm 包里 包含了预编译好的生产环境和开发环境下的 UMD 文件。可以直接使用,而且支持大部分流行的 JavaScript 包加载器和环境。比如,你可以直接在页面上的 标签 中引入 UMD 文件,也可以。UMD 文件可以让你使用 全局变量来访问 Redux。

    Redux 源文件由 ES2015 编写,但是会预编译到 CommonJS 和 UMD 规范的 ES5,所以它可以支持 任何现代浏览器。你不必非得使用 Babel 或模块打包器来使用 Redux。

    附加包

    多数情况下,你还需要使用 和开发者工具

    要点

    应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。
    惟一改变 state 的办法是触发 action,一个描述发生什么的对象。
    为了描述 action 如何改变 state 树,你需要编写 reducers

    就是这样!

    你应该把要做的修改变成一个普通对象,这个对象被叫做 action,而不是直接修改 state。然后编写专门的函数来决定每个 action 如何改变应用的 state,这个函数被叫做 reducer

    如果你以前使用 Flux,那么你只需要注意一个重要的区别。Redux 没有 Dispatcher 且不支持多个 store。相反,只有一个单一的 store 和一个根级的 reduce 函数(reducer)。随着应用不断变大,你应该把根级的 reducer 拆成多个小的 reducers,分别独立地操作 state 树的不同部分,而不是添加新的 stores。这就像一个 React 应用只有一个根级的组件,这个根组件又由很多小组件构成。

    用这个架构开发计数器有点杀鸡用牛刀,但它的美在于做复杂应用和庞大系统时优秀的扩展能力。由于它可以用 action 追溯应用的每一次修改,因此才有强大的开发工具。如录制用户会话并回放所有 action 来重现它。

    Redux 作者教你学

    是由 Redux 作者 Dan Abramov 讲述的包含 30 个视频的课程。它涵盖了本文档的“基础”部分,同时还有不可变(immutability)、测试、Redux 最佳实践、搭配 React 使用的讲解。这个课程将永久免费。

    还等什么?

    开始观看 30 个免费视频!

    文档

    如果你是 NPM 新手,创建和运行一个新的项目有难度,或者不知道上面的代码应该放到哪里使用,请下载 这个示例,它是一个集成了 React、Browserify 和 Redux 的最简化的示例项目。

    交流

    打开 Discord,加入 Reactiflux 中的 #redux 频道。

    感谢

    • 介绍了使用 reducers 来操作 state 数据;
    • Turning the database inside-out 大开脑洞;
    • for convincing me that re-evaluation should “just work”;
    • Webpack 热模块替换;
    • 教我在 Flux 里去掉样板文件和单例对象;
    • disto 演示使用热加载 Stores 的可行性;
    • 证明这样的架构性能可以很好;
    • Om 普及 state 惟一原子化的思想。
    • 介绍了 function 是如何在很多场景都是最好的工具;
    • React 实践启迪。

    作者列表

    本文档翻译流程符合 ETC 翻译规范,欢迎你来一起完善