Redux概念:一個(gè)幫助我們管理State的容器，是javaScript的狀態(tài)容器荡灾，提供了可預(yù)測的狀態(tài)管理瓤狐；
redux中的reducer概念：要求是一個(gè)純函數(shù)（確定的輸入，一定會(huì)有確定的輸出批幌；沒有產(chǎn)生副作用）
比如：slice（純函數(shù)）础锐、splice會(huì)對(duì)原來的數(shù)組修改，不是一個(gè)純函數(shù).
所有React組件都必須像純函數(shù)一樣保護(hù)它們的props不被修改
-
核心理念:Store
-
核心理念:action
所有的數(shù)據(jù)變化荧缘，必須通過派發(fā)(dispath)action來更新
action:是一個(gè)普通的javascript對(duì)象皆警，用來描述這次更新的type和content
const aciont1 = { type:"INC_AGE", index:0 }
const aciont2 = { type:"CHANGE_NAME", playload:{index:0,newName:"haha"} }
-
核心理念:reducer
- 是一個(gè)純函數(shù)
- 做的事情就是將傳入的state和action結(jié)合起來生成一個(gè)新的state
function reducer(state = initialState, action) {
switch (action.type) {
case "INC_AGE":
return { ...state, counter: state.counter + action.num }
case "CHANGE_NAME":
return { ...state, counter: state.counter - action.num }
default:
return state
}
}
export default reducer
三大原則:
1. 單一數(shù)據(jù)源
- 整個(gè)應(yīng)用程序的state被存儲(chǔ)在一顆object tree中，并且這個(gè)object tree只存儲(chǔ)在一個(gè) store 中;
- Redux并沒有強(qiáng)制讓我們不能創(chuàng)建多個(gè)Store截粗，但是那樣做并不利于數(shù)據(jù)的維護(hù)信姓；
- 單一的數(shù)據(jù)源可以讓整個(gè)應(yīng)用程序的state變得方便維護(hù)、追蹤绸罗、修改意推；
2.State是只讀的 - 唯一修改State的方法一定是觸發(fā)action，不要試圖在其他地方通過任何的方式來修改State：
- 這樣就確保了View或網(wǎng)絡(luò)請(qǐng)求都不能直接修改state珊蟀，它們只能通過action來描述自己想要如何修改state菊值；
- 這樣可以保證所有的修改都被集中化處理，并且按照嚴(yán)格的順序來執(zhí)行育灸，所以不需要擔(dān)心race condition（竟態(tài)）的問題
3.使用純函數(shù)來執(zhí)行修改 - 通過reducer將 舊state和 actions聯(lián)系在一起腻窒，并且返回一個(gè)新的State;
- 隨著應(yīng)用程序的復(fù)雜度增加，我們可以將reducer拆分成多個(gè)小的reducers磅崭，分別操作不同state tree的一部分定页；
- 但是所有的reducer都應(yīng)該是純函數(shù)，不能產(chǎn)生任何的副作用绽诚；
基本用法參考
store/actionCreators.js
import * as actionTypes from "./constants"
export const addNumberAction = (num) => ({
type: actionTypes.ADD_NUMBER,
num
})
export const subNumberAction = (num) => ({
type: actionTypes.SUB_NUMBER,
num
})
store/constants.js
export const ADD_NUMBER = "add_number"
export const SUB_NUMBER = "sub_number"
store/reducer.js
import * as actionTypes from "./constants"
const initialState = {
counter: 100
}
function reducer(state = initialState, action) {
switch (action.type) {
case actionTypes.ADD_NUMBER:
return { ...state, counter: state.counter + action.num }
case actionTypes.SUB_NUMBER:
return { ...state, counter: state.counter - action.num }
default:
return state
}
}
export default reducer
store/index.js
import { createStore } from "redux"
import reducer from "./reducer"
const store = createStore(reducer)
export default store
以上寫法過期的后續(xù)會(huì)調(diào)整，目前只是基本的思路理解
