Redux和React

Redux和React

What

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

• 一个完整单独的State Tree
• 操作State Tree的Producer纯函数（可拆分为多个子项）
• 通过Action来表达修改State的意图

Differ

和Fulx类似，也是一种推荐的数据传输方式。只是对比起flux的Dispatcher、Store再分类成Store、Action和Reducer，其中，Action是数据的传输形式，Reducer是事件的集合以及操作的处理（例如增删改查）
Redux 由 Flux 演变而来，但受 Elm 的启发，避开了 Flux 的复杂性。Flux 常常被表述为 (state, action) => state。但是用纯函数，而不是用事件处理器来进行。（No EventEmitter）

• 和flux的区别

flux和redux的不同

从flux的store，view，dispatcher（ACTION_TYPE）演变成了：view，ACTION_TYPE，Reducer，Store（redux中自己有，你在上面注册调用事件即可。或者不注册直接使用默认的dispatcher就好）

• Redux 并没有 dispatcher 的概念，store(dispatcher)的部分已经在store自动实现了。
• 各层的职责：view负责展示和发送事件，Action_type负责事件信息并且获取数据（同步或者异步）传给reducer，reducer负责处理数据。
• Redux 设想你永远不会变动你的数据，因此每次都会返回一个新的state

Why

在 React 中，UI 以组件的形式来搭建，组件之间可以嵌套组合。另，React 中组件间通信的数据流是单向的，顶层组件可以通过 props 属性向下层组件传递数据，而下层组件不能向上层组件传递数据，兄弟组件之间同样不能。这样简单的单向数据流支撑起了 React 中的数据可控性。
那么，更全面的组件间通信形式该怎么实现呢？

1、嵌套组件间，上层组件向下层组件传递回调函数，下层组件触发回调来更新上层组件的数据。
2、以事件的形式，使用发布订阅的方式来通知数据更新。
3、Flux —- Fackbook 提出的管理 React 数据流的架构。Flux 不像一个框架，更是一种组织代码的推荐思想。就像 “引导数据流流向的导流管”。
4、其他的 “导流管”。ReFlux，Redux 等。

前两种形式其实也足够在小应用中跑起来。但当项目越来越大的时候，管理数据的事件或回调函数将越来越多，也将越来越不好管理了。 对于后两种形式，个人经过对比后，可以看出 Redux 对 Flux 架构的一些简化。如 Redux 限定一个应用中只能有单一的 store，这样的限定能够让应用中数据结果集中化，提高可控性。当然，不仅如此。

How

Demo分析（sound-redux）：
使用新技术：webpack\babel & ES6语法\redux\ Go服务器
GO服务器安装：https://segmentfault.com/a/1190000003933557
GO项目的运行：http://blog.studygolang.com/2012/12/go%E9%A1%B9%E7%9B%AE%E7%9A%84%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84/
ps.把项目放到GOPATH的src目录下，其他就等直接编译即可

Scene

大型项目、控件间多逻辑交互的UI层、SPA

参考文章

react数据流管理架构之Redux介绍：http://www.alloyteam.com/2015/09/react-redux/
cookbook:http://cn.redux.js.org/index.html
学习和教程：http://cn.redux.js.org/docs/introduction/Ecosystem.html

ps.之后会对React的其他一些周边做分析，例如react-template，react-router等