Flux
Flux的單向數(shù)據(jù)流
單向數(shù)據(jù)流框架的始祖
- Dispatcher: 處理動(dòng)作分發(fā),維持Strore之間的依賴(lài)關(guān)系
- Store: 負(fù)責(zé)存儲(chǔ)數(shù)據(jù)和處理數(shù)據(jù)的相關(guān)邏輯
- Action: 驅(qū)動(dòng)Dispatcher的JS對(duì)象
- View: 視圖部分,負(fù)責(zé)顯示用戶(hù)界面
Redux
image
Flux的基本原則是"單向數(shù)據(jù)流",Redux在此基礎(chǔ)上強(qiáng)調(diào)三個(gè)基本原則:
- 唯一數(shù)據(jù)源
Redux只有一個(gè)Store,其狀態(tài)結(jié)構(gòu)的設(shè)計(jì)是Redux的核心問(wèn)題(Redux對(duì)Store進(jìn)行了封裝)
- 保持狀態(tài)只讀
狀態(tài)只讀,修改Store狀態(tài)通過(guò)派發(fā)action對(duì)象完成和flux相同. 改變狀態(tài)不是直接修改狀態(tài)上的值,而是創(chuàng)建一個(gè)新的狀態(tài)對(duì)象返回給Redux,由Redux完成新的狀態(tài)組裝(此時(shí),Reducer登場(chǎng))
- 數(shù)據(jù)改變只能通過(guò)純函數(shù)完成
純函數(shù)Reducer;
在Redux中每個(gè)函數(shù)簽名如下reducer(state,action);state:當(dāng)前狀態(tài),action:接受到的action對(duì)象
Reducer只負(fù)責(zé)計(jì)算狀態(tài),卻不負(fù)責(zé)存儲(chǔ)狀態(tài)
React-Redux
- connect: 連接Store (主要做兩件事)
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
- 獲取Store上的狀態(tài)轉(zhuǎn)化為組件的prop
- 將組件中用戶(hù)動(dòng)作dispatch給Store
-
Provider: 提供包含store的context
image
- 在原應(yīng)用組件上包裹一層，使原來(lái)整個(gè)應(yīng)用成為Provider的子組件
- 接收Redux的store作為props夷磕，通過(guò)context對(duì)象傳遞給子孫組件上的connect
redux-actions插件
createAction 簡(jiǎn)化action
import * as ActionTypes from './ActionTypes'
import { createAction } from 'redux-actions'
// import { DECREMENT } from './ActionTypes'
// export const increment = (counterCaption) => {
// return {
// type: ActionTypes.INCREMENT,
// counterCaption
// }
// }
// export const decrement = (counterCaption)=>{
// return{
// type:ActionTypes.DECREMENT,
// counterCaption
// }
// }
export const increment = createAction(ActionTypes.INCREMENT)
export const decrement = createAction(ActionTypes.DECREMENT)
handleActions 簡(jiǎn)化Reducer
import * as ActionTypes from './ActionTypes'
import { handleActions } from 'redux-actions'
/* eslint-disable */
// export default (state, action) => {
// const {counterCaption} = action
// switch (action.type) {
// case ActionTypes.INCREMENT:
// return {...state, [counterCaption]: state[counterCaption] + 1}
// case ActionTypes.DECREMENT:
// return {...state, [counterCaption]: state[counterCaption] - 1}
// default:
// return state
// }
// }
export default handleActions({
[ActionTypes.DECREMENT] (state, action) {
return {...state, [action.payload]: state[action.payload] - 1}
},
[ActionTypes.INCREMENT] (state, action) {
return {...state, [action.payload]: state[action.payload] + 1}
}
}, null)
