標籤:
你若裝逼,請帶我飛!
從前,從前,聽說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:data10 }11 }12 export function delOne(ins){13 return {14 type:DEL,15 index:ins16 }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 //reducer13 function reducer1(initState,action){4 //return newState5 }6 function reducer2(initState,action){7 //return newState8 }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.length22 }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、高階函數什麼的在往後的探索中將再一次重新整理你的眼界;我只想說,你咋不上天呢!但是,就這高逼格,哈哈,請帶我飛吧!
如果你已在路上,就勇敢的向前吧!
原文來自:花滿樓的部落格
React loves you — 洞悉Redux裝的逼