• 生态系统
    • 学习 Redux
      • 演示
      • 示例应用
      • 教程与文章
      • 演讲
    • 使用 Redux
      • 不同框架绑定
      • 中间件
      • 路由
      • 组件
      • 增强器(Enhancer)
      • 工具集
      • 开发者工具
      • 开发者工具监听器
      • 社区公约
      • 翻译
    • 更多

    生态系统

    Redux 是一个体小精悍的库,但它相关的内容和 API 都是精挑细选的,足以衍生出丰富的工具集和可扩展的生态系统。

    如果需要关于 Redux 所有内容的列表,推荐移步至 Awesome Redux。它包含了示例、样板代码、中间件、工具库,还有很多其它相关内容。要想学习 React 和 Redux ,React/Redux Links 包含了教程和不少有用的资源,Redux Ecosystem Links 则列出了 许多 Redux 相关的库及插件。

    本页将只列出由 Redux 维护者审查过的一部分内容。不要因此打消尝试其它工具的信心!整个生态发展得太快,我们没有足够的时间去关注所有内容。建议只把这些当作“内部推荐”,如果你使用 Redux 创建了很酷的内容,不要犹豫,马上发个 PR 吧。

    学习 Redux

    演示

    • 开始学习 Redux — 向作者学习 Redux 基础知识(30 个免费的教学视频)
    • 学习 Redux — 搭建一个简单的图片应用,简要使用了 Redux、React Router 和 React.js 的核心思想

    示例应用

    • 官方示例 — 一些官方示例,涵盖了多种 Redux 技术
    • SoundRedux — 用 Redux 构建的 SoundCloud 客户端
    • grafgiti — 在你的 Github 的 Contributor 页上创建 graffiti
    • React-lego — 如何像积木一样,一块块地扩展你的 Redux 技术栈

    教程与文章

    • Redux 教程
    • Redux Egghead 课程笔记
    • 使用 React Native 进行数据整合
    • What the Flux?! Let’s Redux.
    • Leveling Up with React: Redux
    • A cartoon intro to Redux
    • Understanding Redux
    • @bananaoomarang/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4">Handcrafting an Isomorphic Redux Application (With Love)
    • Full-Stack Redux Tutorial
    • Getting Started with React, Redux, and Immutable
    • Secure Your React and Redux App with JWT Authentication
    • @meagle/understanding-87566abcfb7a">Understanding Redux Middleware
    • Angular 2 — Introduction to Redux
    • Apollo Client: GraphQL with React and Redux
    • Using redux-saga To Simplify Your Growing React Native Codebase
    • Build an Image Gallery Using Redux Saga
    • Working with VK API (in Russian)

    演讲

    • Live React: Hot Reloading and Time Travel — 了解 Redux 如何使用限制措施,让伴随时间旅行的热加载变得简单
    • Cleaning the Tar: Using React within the Firefox Developer Tools — 了解如何从已有的 MVC 应用逐步迁移至 Redux
    • Redux: Simplifying Application State — Redux 架构介绍

    使用 Redux

    不同框架绑定

    • react-redux — React
    • ng-redux — Angular
    • ng2-redux — Angular 2
    • backbone-redux — Backbone
    • redux-falcor — Falcor
    • deku-redux — Deku
    • polymer-redux - Polymer
    • ember-redux - Ember.js

    中间件

    • redux-thunk — 用最简单的方式搭建异步 action 构造器
    • redux-promise — 遵从 FSA 标准的 promise 中间件
    • redux-axios-middleware — 使用 axios HTTP 客户端获取数据的 Redux 中间件
    • redux-observable — Redux 的 RxJS 中间件
    • redux-rx — 给 Redux 用的 RxJS 工具,包括观察变量的中间件
    • redux-logger — 记录所有 Redux action 和下一次 state 的日志
    • redux-immutable-state-invariant — 开发中的状态变更提醒
    • redux-unhandled-action — 开发过程中,若 Action 未使 State 发生变化则发出警告
    • redux-analytics — Redux middleware 分析
    • redux-gen — Redux middleware 生成器
    • redux-saga — Redux 应用的另一种副作用 model
    • redux-action-tree — Redux 的可组合性 Cerebral-style 信号
    • apollo-client — 针对 GraphQL 服务器及基于 Redux 的 UI 框架的缓存客户端

    路由

    • redux-simple-router — 保持 React Router 和 Redux 同步
    • redux-router — 由 React Router 绑定到 Redux 的库

    组件

    • redux-form — 在 Redux 中时时持有 React 表格的 state
    • react-redux-form — 在 React 中使用 Redux 生成表格

    增强器(Enhancer)

    • redux-batched-subscribe — 针对 store subscribers 的自定义批处理与防跳请求
    • redux-history-transitions — 基于独断的 action 的 history 库转换
    • redux-optimist — 使 action 可稍后提交或撤销
    • redux-optimistic-ui — A reducer enhancer to enable type-agnostic optimistic updates 允许对未知类型进行更新的 reducer 增强器
    • redux-undo — 使 reducer 便捷的重做/撤销,以及 action 记录功能
    • redux-ignore — 通过数组或过滤功能忽略 redux action
    • redux-recycle — 在确定的 action 上重置 redux 的 state
    • redux-batched-actions — 单用户通知去 dispatch 多个 action
    • redux-search — 自动 index 站点资源并实现即时搜索
    • redux-electron-store — Store 增强器, 可同步不同 Electron 进程上的多个 Redux store
    • redux-loop — Sequence effects purely and naturally by returning them from your reducers
    • redux-side-effects — Utilize Generators for declarative yielding of side effects from your pure reducers

    工具集

    • reselect — 受 NuclearJS 启发,有效派生数据的选择器
    • normalizr — 为了让 reducers 更好的消化数据,将API返回的嵌套数据范式化
    • redux-actions — 在初始化 reducer 和 action 构造器时减少样板代码 (boilerplate)
    • redux-act — 生成 reducer 和 action 创建函数的库
    • redux-transducers — Redux 的编译器工具
    • redux-immutablejs — 将Redux 和 Immutable 整合到一起的工具
    • redux-tcomb — 在 Redux 中使用具有不可变特性、并经过类型检查的 state 和 action
    • redux-mock-store - 模拟 redux 来测试应用
    • redux-actions-assertions — Redux actions 测试断言

    开发者工具

    • redux-devtools — 一个使用时间旅行 UI 、热加载和 reducer 错误处理器的 action 日志工具,最早演示于 React Europe 会议
    • Redux DevTools Extension — 打包了 Redux DevTools 及附加功能的 Chrome 插件

    开发者工具监听器

    • Log Monitor — Redux DevTools 默认监听器,提供树状视图
    • Dock Monitor — A resizable and movable dock for Redux DevTools monitors
    • Slider Monitor — Redux DevTools 自定义监听器,可回放被记录的 Redux action
    • Inspector — Redux DevTools 自定义监听器,可筛选、区分 action,深入 state 并监测变化
    • Diff Monitor — 区分不同 action 的 store 变动的 Redux Devtools 监听器
    • Filterable Log Monitor — 树状可筛选视图的 Redux DevTools 监听器
    • Chart Monitor — Redux DevTools 图表监听器
    • Filter Actions — 可筛选 action 、可组合使用的 Redux DevTools 监听器

    社区公约

    • Flux Standard Action — Flux 中 action object 的人性化标准
    • Canonical Reducer Composition — 嵌套 reducer 组成的武断标准
    • Ducks: Redux Reducer Bundles — 关于捆绑多个 reducer, action 类型 和 action 的提案

    翻译

    • 中文文档 — 简体中文
    • 繁體中文文件 — 繁体中文
    • Redux in Russian — 俄语
    • Redux en Español - 西班牙语

    更多

    • Awesome Redux 是一个包含大量与 Redux 相关的库列表。
    • React-Redux Links React、Redux、ES6 的高质量文章、教程、及相关内容列表。
    • Redux Ecosystem Links Redux 相关库、插件、工具集的分类资源。