回顧
- 初識react(一) 揭開jsx語法和虛擬DOM面紗
- 初識react(二) 實現一個簡版的html+redux.js的demo
- 初識react(三)在 react中使用redux來實現簡版計數器
- 初識react(四) react中異步解決方案之 redux-saga
- 初識react(五) 數據流終極解決方案 dva(零配置)
前言
首先糾正個誤區，redux可以配合jq等框架使用，并不單單局限于react。為了讓所有人都看懂，我們這里先只實現一個最簡單版本的 html+redux.js的使用。
為什么出現redux
隨著單頁面應用的復雜，多個沒有聯系的組件之間想要共享狀態(state)很困難，Redux的出現解決了數據問題
redux三大原則
單一數據源
- 整個應用的state都被存儲在一個倉庫中，我們稱之為store,整個應用只能有一個store。
只讀的state
- 唯一改變state的方法就是dispatch(action)，即派發動作。
使用純函數執行修改
- 為每個action用純函數編寫reducer來描述如何修改state
說了這么多，看不懂?沒關系，就是有三個概念 state、reducer、action。下面我們一一講解API
概念解析
1、store 倉庫
- redux提供了一個createStore函數，用來生成store
- store就是保存數據的地方，可以看成一個容器。整個應用只能有一個store
function createStore(reducer) { //將狀態放到一個盒子里 別人改不了...
}
let store = createStore(reducer)復制代碼2、State 狀態
store對象包含所有數據。如果想得到某個時點數據,就要對Store生成快照。這種時間點的數據集合，就叫做State。 當前時刻的State，可以通過store.getState()拿到。
let state = store.getState()
復制代碼3、action 動作
- action必須是一個對象,type是必須的，用戶可以派發動作來改變state.
let action = {type:"change_title_text",text:"改變標題了"
}
復制代碼4、store.dispatch(action) 派發動作
- store.dispatch()是發出action的唯一方法
let store = createStore(reducer);
store.dispatch(action) //action=>{type:"change_title_text",text:"改變標題了"}
復制代碼5、Reducer 管理員，也可以稱之為處理器
- Store收到派發的動作后即dispatch(action)，必須返回一個新的state，這樣視圖才會變化。
- 這種state的計算過程叫做Reducer，是一個純函數，接受state和action作為參數，返回一個新的state
let reducer = function(state,action){return new_state;
}
復制代碼廢話了這么多，很慶幸把基本概念說完了，終于來個實戰來看看具體怎么工作的。我們做一個最簡單計算器，點擊加1，來看看redux怎么工作的
計數器實現步驟(redux)
1、聲明一個初始化狀態
let initState = {number:0}
復制代碼2、createStore 重點
- 創建倉庫，保存狀態，對外暴露當前狀態=>getState 和如何更改狀態的方法=>dispatch
let createStore=(reducer)=> { //將狀態放到一個盒子里 別人改不了let state ; //聲明狀態function dispatch(action) { //派發 參數是action動作,action是一個對象state= reducer(state,action); //調用寫好的方法,這個方法會返回一個新的狀態}dispatch({}); //內部需要先定義次let getState = ()=> JSON.parse(JSON.stringify(state)); //獲取狀態的方法 深拷貝return {getState,dispatch};
}復制代碼- 需要知道 action是一個對象=>{type:"add",count:5}，類型為add,每次點擊加5
- 在創建倉庫的時候,會默認先調用,dispatch({})，給state賦值默認狀態
- 對外暴露 getState方法,用戶可以 獲取最新狀態
- 對外暴露 dispatch方法，用戶可以派發動作
當看不懂時,只要知道目的只有一個，就是在給state賦默認值。 先dispatch({})=>reducer(state,action)。就可以賦默認值拉，至于為什么，往下看
3、reducer實現
- 管理員，可以根據類型返回不同的狀態
let reducer=(state=initState,action)=> { //管理員,負責如何更改狀態的switch (action.type) { //更改狀態 要有一個新的狀態覆蓋掉case "add":return {number:state.number+action.count}}return state;
};
復制代碼好了，到目前為止，我們來梳理下思路
- 我們會這樣調用 let store = createStore(reducer),這其中發生了什么，如何把初始狀態賦值給state的
- 步驟dispatch({}) =>reducer(initState,action)=>state=initState
4、渲染頁面視圖為初始狀態
let store = createStore(reducer);
function render() {let content = document.querySelector('.content');content.innerHTML = store.getState().getState().number;
}
render();
復制代碼- 將頁面視圖與store中的state進行綁定。看效果
目前為止，一切完美，那我們怎么點擊按鈕改變狀態，只能通過store.dispatch()方法
5、點擊改變視圖
btn.onclick = function () {store.dispatch({type:"add",count:5});render()
}
復制代碼到目前為止，一個最簡單的redux應用算實現了，其實redux還是比較簡單的，重點是理解它概念，后續會講解在react中如何使用redux
- redux全部源碼解析，可以參考我總結
- 更多優質文章參考
