你若裝逼，請帶我飛！
從前，從前，聽說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是什么。愛掏網 - it200.com。愛掏網 - it200.com。愛掏網 - it200.com就是那個將要全權代管你所有組件state的那家伙！用Redux的自述來說就是：
Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。愛掏網 - it200.com
如果你之前不懂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；
javascript 代碼
// 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則指明該怎么干什么；
javascript 代碼
// 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{
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合并；
javascript 代碼
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可能該這么寫了：
javascript 代碼
import React from 'react';
import {connect} from 'react-redux';
import {addOne,delOne} from './actions';
class App extends React.Component{
render(){
return (
length:{this.props.length};datas:{this.props.value}
{this.props.children}
);
}
}
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
javascript 代碼
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的值，這樣，里面的組件中映射成為props的state就都能取到值了；至此，就基本將Redux引進來了；可能把這個簡單的增刪datas的玩意，用Angular和JQuery都是幾行代碼的事，而到了這里卻要幾十行代碼，又混進來了一堆概念，而Redux并不僅僅就這些，像Middleware、高階函數什么的在往后的探索中將再一次刷新你的眼界；我只想說，你咋不上天呢！但是，就這高逼格，哈哈，請帶我飛吧！
如果你已在路上，就勇敢的向前吧！
原文來自：花滿樓的博客（famanoder.com）