redux和react redux的關係: redux是react的狀態管理工具,卻不僅僅只是為了react而生的,所以在使用中會存在痛點。而react redux是專門為了react定製,目的是為瞭解決redux的痛點,起到了補充的作用。 redux和flux思想: 從代碼層面而言,flux無非就 ...
redux和react-redux的關係:
redux是react的狀態管理工具,卻不僅僅只是為了react而生的,所以在使用中會存在痛點。而react-redux是專門為了react定製,目的是為瞭解決redux的痛點,起到了補充的作用。
redux和flux思想:
從代碼層面而言,flux無非就是一個常見的event dispatcher,其目的是要將以往MVC中各個View組件內的controller代碼片斷提取出來放到更加恰當的地方進行集中化管理,並從開發體驗上實現了舒適清爽、容易駕馭的“單向流”模式。
但為了區分於以往的MVC模式,並向facebook的貢獻表達敬意,後面我們將把這種優化後的 Model-View-Controller 開發模式在React背景下正式稱為Flux模式。
redux 的核心概念:
- 在頂層組件創建一個store(狀態實例),底層組件通過props共用這個store。
- 數據流動的方向:
component->action->reducer->state->component
component: 展示結果(含處理結果代碼)
action: 轉發的動作,非同步請求,
reducer: 業務處理邏輯,copy+更新 + 返回(return)新state
state: 狀態收集,更新內部state狀態,更新訂閱(store.subscribe)state的組件(component) - 更改state:
component-->dispatch(action)-->reducer 獲取state:
store.getState() 抓state狀態---只能抓取一次
store.subscribe() 訂閱---state更新會觸發---首次不更新不觸發,導致影響首次渲染兩種方法可以結合使用