标签：
你若装逼，请带我飞！
从前，从前，听说React只负责UI，话说写Angular代码就像写后端，现在看来，React赢在情怀上了；
我认为没必要老是拿React和Angular做比较，Angular是一套大而全的相对完备的框架；而React确实是只负责UI，只是多出很多概念层的东西，需要自己以此去构造；React更像是打造一个由React作为主线的生态；以component为基础，虚拟DOM解决性能瓶颈，单向数据流统一管理components，webpack、ES6、JSX完美融合，还有Flux、Redux等架构方案及其周边扩展，加上React Native；说好的只负责UI呢，这是通吃的节奏啊！这是一条情怀路线，击中了很多前端人长期以来对Web探索的痛点：Web Components；所以才能振臂一呼，应者云集；而当你真正开始走进React，你会发现，正如老罗所说：“漂亮的不像实力派！”；
实在是机缘巧合，之前的博客有一篇《富文本编辑器小记 — 关于撤销、重做操作》，是关于简单的canvas操作和富文本编辑器里自定义撤销重做的方法，现在发现LOW爆了，因为Redux的文档中就有一个关于撤销重做的实例；算是被Redux教做人了，所以正式决定要开始Redux了；话说Redux对于一般不是那么复杂的有很多状态管理的地方并不是必须的，本来state和props可以好好的玩耍，现在半路杀出了个Redux，并全权掌控了state，这么高逼格，请带我飞吧！
不要问Redux是什么。。。就是那个将要全权代管你所有组件state的那家伙！用Redux的自述来说就是：
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
如果你之前不懂Redux，那么看到这句话，你可能依然很平静，或是脑子开始打转，有些似懂非懂，甚至有点迷惑，唉，其实就是依然不懂嘛！
既然state从此是路人，那么咱就得安心的开始写action和reducer了，一起走进Redux；
Redux提供的是一套机制，所以并不太容易一下子接受，话说React从开始到现在有太多不太容易一下子接受的地方了，关键是都是很有逼格的玩意，所以要想飞的更高，就该把地平线忘掉！Redux 是 JavaScript 状态容器也叫Store，它是由所有组件state组成的一个对象树，也可以把它看作一个大的JSON，或是一个属于前端的小数据库，不再操作state，而是对这个大的JSON进行增删改查；只是操作方式由Redux提供；
1、action和actionCreator
action是Store数据的来源，本身就是一个普通的js对象，type字段是必须的，指明干了什么；不同业务类型的action可以各自单独存放，actionCreator函数仅返回一个action，由dispatch(action)调用来更新state；
1 // action type:datas 2 export const ADD=‘ADD‘; 3 export const DEL=‘DEL‘; 4 5 // action creator:datas 6 export function addOne(data){ 7 return { 8 type:ADD, 9 payload:data 10 } 11 } 12 export function delOne(ins){ 13 return { 14 type:DEL, 15 index:ins 16 } 17 }
如上，声明了两个action的type：ADD和DEL；两个actionCreator：addOne和delOne，分别返回一个action；
2、reducer
action只是指明干了什么，reducer则指明该怎么干什么；
1 // reducer 2 import {ADD,DEL} from ‘./actions‘; 3 const initDatasState={datas:[],length:0}; 4 export function datasJson(state=initDatasState,action){ 5 switch (action.type) { 6 case ADD: 7 return {datas:[...state.datas,action.payload],length:state.length+1}; 8 case DEL: 9 if (state.length<=0) { 10 return state; 11 } 12 state.datas.forEach((a,i)=>{ 13 i==action.index&&state.datas.splice(i,1); 14 }); 15 return {datas:state.datas,length:state.length-1}; 16 default: 17 return state; 18 } 19 }
reducer是一个纯函数，接收旧state和action，返回新state；(previousState,action)=>newState；
reducer可以拆分为多个，最后由combineReducers合并；
1 import {combineReducers} from ‘redux‘; 2 //reducer1 3 function reducer1(initState,action){ 4 //return newState 5 } 6 function reducer2(initState,action){ 7 //return newState 8 } 9 export default combineReducers({reducer1:reducer1,reducer2:reducer2});
3、连接Redux
引入Redux后，你的App.js可能该这么写了：
1 import React from ‘react‘; 2 import {connect} from ‘react-redux‘; 3 import {addOne,delOne} from ‘./actions‘; 4 5 class App extends React.Component{ 6 render(){ 7 return ( 8 <div> 9 <input type="button" onClick={this.props.onAdd} value="addOneItem"/><br/> 10 length:<b>{this.props.length}</b>;datas:<i>{this.props.value}</i><br/> 11 <input type="button" onClick={this.props.onDel} value="delFirst"/> 12 {this.props.children} 13 </div> 14 ); 15 } 16 } 17 18 function mapStateToProps(state){ 19 return { 20 value:JSON.stringify(state.datas), 21 length:state.length 22 } 23 } 24 function mapDispatchToProps(dispatch){ 25 return { 26 onAdd:()=>{ 27 let data={id:Math.round(Math.random()*10),text:Math.round(Math.random()*1000000000).toString(16)}; 28 dispatch(addOne(data)); 29 }, 30 onDel:()=>{ 31 dispatch(delOne(0)); 32 } 33 } 34 } 35 36 export default connect(mapStateToProps,mapDispatchToProps)(App);
如今state已全部交由Redux代管了：mapStateToProps将state绑定映射为props；mapDispatchToProps将修改state的操作映射为props，connect来连接该组件与Redux；既然state都聚集到了Store里，那么映射后的props的取值和修改将都指向Store，这个由Provider解决；
4、Provider
1 import React from ‘react‘; 2 import ReactDOM from ‘react-dom‘; 3 import {createStore} from ‘redux‘; 4 import {Provider} from ‘react-redux‘; 5 import {reducers} from ‘./reducers‘; 6 import App from ‘./app‘; 7 8 const Store=createStore(reducers); 9 console.log(Store.getState()); 10 ReactDOM.render( 11 <Provider store={Store}> 12 <App> 13 <Inpt /> 14 </App> 15 </Provider>, 16 document.getElementById(‘views‘) 17 );
现在Provider作为最外层容器并绑定Store的值，这样，里面的组件中映射成为props的state就都能取到值了；至此，就基本将Redux引进来了；可能把这个简单的增删datas的玩意，用Angular和JQuery都是几行代码的事，而到了这里却要几十行代码，又混进来了一堆概念，而Redux并不仅仅就这些，像Middleware、高阶函数什么的在往后的探索中将再一次刷新你的眼界；我只想说，你咋不上天呢！但是，就这高逼格，哈哈，请带我飞吧！
如果你已在路上，就勇敢的向前吧！
原文来自：花满楼的博客
标签：
原文地址：http://www.cnblogs.com/hufeng/p/5702080.html
