白話Redux事變道理。淺顯易懂。
若有馬虎或疑問,迎接交換。
Redux 約法三章
唯一數據源(state)
雖然redux
中的state
與react
沒有聯絡,但能夠簡樸理解為react組件中的this.state
。html
文檔只是state
的一種表現形式。一切html
的數據應當都是直接或間接來自於state
,不然UI視圖是沒法因state
轉變而更新的。
數據源(state)只讀
不應當直接修正state
數據。
關於數組運用:
Array.prototype.slice()//對數組舉行拷貝
//運用ES6:
[...state, ...newState]
關於對象運用:
Object.assign({}, state, change1, change2...)//對對象舉行拷貝
//運用ES6:
{...state, ...newState}
經由過程純函數(pure function)轉變數據源(state)
pure function
: 無其他API(包含Math, Date等)挪用,無異步操縱,preState => newState。
Redux數據流
簡樸引見store
/reducer
/action
, 比較簡約,請牢記於心。
store
UI唯一數據泉源,能夠理解為react中的state,store信息的變化會觸發視圖更新.
action
對象。必需具有type屬性,用來形貌發作什麼。可挑選照顧發作時的數據,如用戶輸入的input value。牢記:僅僅用來表述發作了什麼。
reducer
pure function(上面有詮釋)。依據action.type來做出迴響反映,(preState, action) => newState,天生的state是用來轉變store的。
所以,data flow(數據流):
- UI發出行動,如click, submit;
- action, 形貌發作了什麼;
- reducer處置懲罰發作的事變,天生新state;
- store被更新;
- UI相應store更新
- …
Redux action
舉幾個例子,可能會比較直觀:
{
type: “TOGGLE_TODO”, //這個type屬性必須要,必需是字符串
index: 5 //附加信息,本身依據須要挑選是不是到場
};
{
type: “ADD_TODO”,
text:“進修Redux” //附加信息,這裡是input value
}
沒別的,就是這麼簡樸。
有時候能夠運用action天生器(action creators)來批量生產類似action對象,如:
//我須要依據差別的input value來天生高度類似的action:
function (text) {
return {
type: "ADD_TODO",
text: text //附加的信息
}
}
申明
雖然上面數據流提到,action經由過程reducer處置懲罰天生newState后才能夠變動store信息。然則為了更好的語義編程,Redux經由過程語句store.dispatch(action)
來更新store,reducer對action的處置懲罰在內部處置懲罰。
Redux reducer
很簡樸
(theState, action) => (newState);
//僅僅只是依據action.type處置懲罰一下須要更新的state
來看一個相對完全的reducer:
function todoApp(state = initialState, action) { //注重須要處置懲罰undefined情況下的state默認值
switch (action.type) { //依據action.type來推斷
case "SET_VISIBILITY_FILTER":
return Object.assign({}, state, {
visibilityFilter: action.filter
})
case “ADD_TODO”: //處置懲罰“ADD_TODO”的action type
//返回新state(newState),注重不要直接轉變state,對象運用了
//Object.assign()。也能夠運用ES的...操縱符
return Object.assign({}, state, {
todos: [
...state.todos,
{
text: action.text,
completed: false
}
]
})
case “TOGGLE_TODO”: //處置懲罰“TOGGLE_TODO”的action type
return Object.assign({}, state, {
todos: state.todos.map((todo, index) => {
if (index === action.index) {
return Object.assign({}, todo, {
completed: !todo.completed
})
}
return todo
})
})
default:
return state
}
}
Redux store
store
UI視圖唯一數據泉源(直接或間接),能夠獵取state,更新state,監聽state變化,作廢監聽。所以store供應了一下要領:
-
store.getState()
獵取當前state -
store.dispatch(action)
更新state -
store.subscribe(listener)
store更新后回調listener,回調函數內里能夠挪用store.getStore()來獵取更新后得state喲~ - 作廢listener的體式格局比較迥殊:再挪用一次
store.subscribe(sameListner)
ps: 若有馬虎或疑問,迎接交換。
先寫這麼多,有時間繼承更新。