Redux和react-redux的学习总结

写在最前面：这段时间一直在看前端方面的东西，以前只是了解HTML，CSS，JS，jQuery，因为公司交代了前端的任务，因此后面又看了Bootstrap，React，Redux，react-redux。特别是后面涉及到组件以及组件通讯，让我有一种想再学习一下Vue的冲动。问渠那得清如许，为有源头活水来呀！

 

Bootstrap框架的优点：（封装CSS，移动设备优先）

1. 移动设备优先、响应式设计：Bootstrap 的响应式 CSS 可以自适应于台式机、平板电脑和手机；

2. Bootstrap自带全局CSS设置、可定义基本的 HTML 元素样式、可扩展的 class；

3. 定义了多种可重用的组件，同时提供了一个带有网格系统、连接样式、背景的基本结构；

 

React框架的优点：（减小DOM操做，组件渲染UI）

1. React主要用于构建UI，经过对DOM的模拟，最大限度地减小与DOM的交互；

2. 组件构建，代码复用

3. 单向的响应数据流，state经过与用户交互来改变状态，props是不变的，一般将父组件设置为state，子组件设置为props；

4. React 把组件当作是一个状态机（State Machines）。经过与用户的交互，实现不一样状态，而后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，而后根据新的 state 从新渲染用户界面（不要操做 DOM）。

 

React 只是 DOM 的一个抽象层，并非 Web 应用的完整解决方案。有两个方面它没涉及：代码结构，组件之间的通讯。从而Redux框架来进行优化。　　

Redux框架的优点

大型企业项目中解决组件通讯，优化代码结构；小项目可不用该框架来优化React。

 

学习Redux以前最好参考Flux框架：

Flux将一个应用分红四个部分：

View： 视图层

Action（动做）：视图层发出的消息（好比mouseClick）

Dispatcher（派发器）：用来接收Actions、执行回调函数

Store（数据层）：用来存放应用的状态，一旦发生变更，就提醒Views要更新页面

 

Redux中的基本概念：

1. store：Store 就是保存数据的地方，你能够把它当作一个容器。整个应用只能有一个 Store；

2. state：Store对象包含全部数据；

3. Action：Action 就是 View 发出的通知，表示 State 应该要发生那种type的变化，同时该通知中能够携带其余数据；

4. ActionCreator：通用的Action转换函数；

5. store.dispatch()：store.dispatch()是 View 发出 Action 的惟一方法；

6. Reducer：Reducer接受 Action 和当前 State 做为参数，返回一个新的 State；

7. 异步操做；

 

React-Redux的概念：

1. connect：用于从 UI 组件生成容器组件，从而将这两种组件连起来；

2. mapStateToProps：创建一个从（外部的）state对象到（UI 组件的）props对象的映射关系；

3. mapDispatchToProps：创建 UI 组件的参数到store.dispatch方法的映射；

4. Provider：Provider在根组件外面包了一层，这样App中的全部子组件就默认均可以拿到state；

 

公司要求在页面上增长一个按钮来处理相应的工单请求：

1. 初始数据结构：

2. 链接UI容器：

3. 添加相应的Modal层，并定义事件函数，同时将父组件的数据传入子组件：

4. 添加事件处理函数从而控制Modal层的显示与隐藏：

5. 事件派发mapDispatchToProps定义，其中processRecycleSubmit为异步处理：

6. Reducer处理Action：

7. 刷新state到子组件的props中：

8. 回收处理函数processRecycleSubmit，构建表单，经过Ajax提交表单：

总结：Dispatch触发相应的action；action指定将要处理的类型type，但action不操心具体怎么实现，它只需说明它想处理的类型type，同时提交处理该type的部分数据给reducer；reducer就去具体实现，修改state，而后返回一个全新的state。