redux
搭配 React使用
Redux和React之間沒有關(guān)系琼腔，Redux支持React, Angular, Ember, jQuery甚至原生JavaScript
因?yàn)?code>React中允許你以state函數(shù)的形式來描述頁面佳遣，Redux通過action的形式來發(fā)起state變化
安裝
npm install --save redux
要點(diǎn)
-
應(yīng)用中所有的state都是以對象樹的形式儲存在一個store中。如圖為應(yīng)用中唯一的storestate_tree.jpg
唯一改變state的方法是觸發(fā)action桐愉，action簡單來說也就是一個描述發(fā)生了什么的對象遗菠。
為了描述action如何改變state樹僵井，我們需要編寫reducers，看代碼
寫法流程
下面的步驟這里為了方便演示庄萎，是全部寫在同一個文件即src/store/index.js，工作中根據(jù)實(shí)際需求自己進(jìn)行拆分 模塊化
1. 創(chuàng)建應(yīng)用中唯一的 store
import { createStore } from 'redux'
const store = createStore(reducer) //創(chuàng)建store來存放應(yīng)用的狀態(tài) store的API有：dispatch,subscribe,getState
/**
getState()： 返回應(yīng)用當(dāng)前的state樹塘安，它與store的最后一個reducer返回值相同
dispatch(action)： 分發(fā)action糠涛。這是觸發(fā)state變化的唯一途徑，使用當(dāng)前的getState()的結(jié)果和傳入的action以同步的方式來調(diào)用store的reducer函數(shù)兼犯，返回值會被作為下一個state忍捡。同時變化偵聽器也會被觸發(fā)
subscribe(listen)： 每當(dāng) dispatch action時就會執(zhí)行，你可以在回調(diào)函數(shù)(listen)中調(diào)用getState()來拿到當(dāng)前的state
*/
2. 編寫 reducer
function reducer(state = {}, action) {
// 通過判斷action的type免都，來描述action是如何把state轉(zhuǎn)變?yōu)橄乱粋€state
switch (action.type) {
case 'TYPE1':
let newState = JSON.parse(JSON.stringify(state)) // 深拷貝操作
// 對newState做對應(yīng)的處理
return newState
case 'TYPE2':
let newState2 = JSON.parse(JSON.stringify(state))
// 對newState做對應(yīng)的處理
return newState2
default:
return state
}
}
/**
* 這是一個reducer,是一個純函數(shù), 形式為 (state, action) => state 的函數(shù)锉罐，這個函數(shù)是專門來決定每個action是如何改變應(yīng)用的state的
* 當(dāng)state變化時需要返回全新的對象帆竹，而不是修改傳入的參數(shù)绕娘，因此上面使用深拷貝
*/
當(dāng)我們的應(yīng)用不斷變大， 我們應(yīng)該把reducer拆分成多個小的reducers栽连，分別獨(dú)立操作state樹的不同部分险领，而不是增加新的stores。具體怎么拆分秒紧，官方文檔有示例：三大原則下的使用 純函數(shù)來執(zhí)行修改
3. 訂閱更新 （編寫變化偵聽器）
可以手動訂閱更新绢陌，也可以事件綁定到視圖層
store.subscribe(() => {
console.log(store.getState())
// this.setState(store.getState())
})
4.改變state
改變 state 的唯一方法是dispatch 一個 action
store.dispatch({type: 'TYPE1'})
store.dispatch({type: 'TYPE2'})
