1. 程式人生 > >react全域性狀態管理react-redux

react全域性狀態管理react-redux

簡言之,通過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等基本概念參見阮老師的部落格)