你若装逼，请带我飞！
I love React !
夙昔，夙昔，据说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，你会发明，正如老罗所说：“美丽的不像实力派！”；
Redux 来了 ！
实在是机缘巧合，之前的博客有一篇《富文本编辑器小记 — 关于打消、重做操纵》，是关于简朴的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；
// action type:datas
export const ADD='ADD';
export const DEL='DEL';
// action creator:datas
export function addOne(data){
return {
type:ADD,
payload:data
}
}
export function delOne(ins){
return {
type:DEL,
index:ins
}
}如上，声清楚明了两个action的type：ADD和DEL；两个actionCreator：addOne和delOne，离别返回一个action；
2、reducer
action只是指明干了什么，reducer则指明该怎样干什么；
// reducer
import {ADD,DEL} from './actions';
const initDatasState={datas:[],length:0};
export function datasJson(state=initDatasState,action){
switch (action.type) {
case ADD:
return {datas:[...state.datas,action.payload],length:state.length+1};
case DEL:
if (state.length<=0) {
return state;
}
state.datas.forEach((a,i)=>{
i==action.index&&state.datas.splice(i,1);
});
return {datas:state.datas,length:state.length-1};
default:
return state;
}
}reducer是一个纯函数，吸收旧state和action，返回新state；
(previousState,action)=>newState；
reducer能够拆分为多个，最后由combineReducers兼并；
import {combineReducers} from 'redux';
//reducer1
function reducer1(initState,action){
//return newState
}
function reducer2(initState,action){
//return newState
}
export default combineReducers({reducer1:reducer1,reducer2:reducer2});3、衔接Redux
引入Redux后，你的App.js能够该这么写了：
import React from 'react';
import {connect} from 'react-redux';
import {addOne,delOne} from './actions';
class App extends React.Component{
render(){
return (
<div>
<input type="button" onClick={this.props.onAdd} value="addOneItem"/><br/>
length:<b>{this.props.length}</b>;datas:<i>{this.props.value}</i><br/>
<input type="button" onClick={this.props.onDel} value="delFirst"/>
{this.props.children}
</div>
);
}
}
function mapStateToProps(state){
return {
value:JSON.stringify(state.datas),
length:state.length
}
}
function mapDispatchToProps(dispatch){
return {
onAdd:()=>{
let data={id:Math.round(Math.random()*10),text:Math.round(Math.random()*1000000000).toString(16)};
dispatch(addOne(data));
},
onDel:()=>{
dispatch(delOne(0));
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(App);现在state已悉数交由Redux代管了：mapStateToProps将state绑定映照为props；mapDispatchToProps将修正state的操纵映照为props，connect来衔接该组件与Redux；既然state都群集到了Store里，那末映照后的props的取值和修正将都指向Store，这个由Provider处理；
4、Provider
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import {reducers} from './reducers';
import App from './app';
const Store=createStore(reducers);
console.log(Store.getState());
ReactDOM.render(
<Provider store={Store}>
<App>
<Inpt />
</App>
</Provider>,
document.getElementById('views')
);现在Provider作为最外层容器并绑定Store的值，如许，内里的组件中映照成为props的state就都能取到值了；至此，就基础将Redux引进来了；能够把这个简朴的增删datas的玩意，用Angular和JQuery都是几行代码的事，而到了这里却要几十行代码，又混进来了一堆观点，而Redux并不仅仅就这些，像Middleware、高阶函数什么的在今后的探究中将再一次革新你的眼界；我只想说，你咋不上天呢！然则，就这高逼格，哈哈，请带我飞吧！
假如你已在路上，就英勇的向前吧！
