react全域性狀態管理react-redux
阿新 • • 發佈:2018-12-09
簡言之,通過react-redux提供的connect方法將UI元件同store連線起來,connect方法可以接受兩個引數,第一個為mapStateToProps(接受兩個引數,state,ownProps),用於UI元件的輸入邏輯,此建立了從外部的資料(即store中的state
物件)到UI元件的props的一個對映;第二個引數為mapDispatchToProps(接受兩個引數,dispatch,ownProps),用於UI元件的輸出邏輯,即使用者發出的動作如何變為 Action 物件,從 UI 元件傳出去,從而影響外部資料state。
State 的變化必須是 View 導致的,Action 就是 View 發出的通知,表示 State 應該要發生變化了。
Action 是一個物件。其中的type
屬性是必須的,表示 Action 的名稱,其他屬性可以自由設定。
物件store
的方法dispath
用於派發action,store.dispatch(action)
是 View 發出 Action 的唯一方法。
通過dispath
派發的action
會觸發reducer,reducer執行會返回一個新的state,此時state改變了。
state的改變又會通過mapStateToProps函式傳入UI元件的props,UI元件的Props改變又會觸發render函式,從而更新UI元件。
以上就是redux大致的工作流程。
個人理解,歡迎評論批評指正。(action,reducer等基本概念參見阮老師的部落格)