關於Redux 的數據流的介紹

節選翻譯 a cartoon intro to redux

關於Redux 的數據流的介紹

1. 初始化store ,root component 建立 store, 並用 createStore 方法告訴 store 使用那個 root reducer. 這個root reducer 下面已經有多個子reducer. root reducer使用 combineReducer() 來集成子reducer 到 rootReducer 裏面.

2. 創建 store 和 components 之間的通訊. root component 把傳入的 provider 傳入的 component 包裝成本身的 subcomponent, 而且創建store 和 provider 之間的聯繫.
   Provider 建立了更新component的網絡, 那些 smart component 經過connect()接入網絡，確保組件state能夠及時更新

3. 準備 action 的回調, 這個讓一些dumb components 更好的和action工做, smart components 能夠使用bindActionCreator() 新建 action 的 callbacks.
   這種方式只須要傳遞一下callback 到dump Components, action 就將自動分發當它整理好後.

當應用初始化完成後, 用戶就能夠與之進行交互, 下面將演示用戶觸發一個action後的數據流程

1. 視圖獲取到action. action creator 將其格式化返回.

2. action 要麼自動分發(若是bindActionCreators() 在setup中使用到), 要麼view 分發該action

3. store 將獲取到action, 並將當前的 state tree 和 action 傳遞給root reducer

4. root reducer 把 state tree 砍開多個slice, 並把每一個 slice 傳遞到相應的 subreducer

5. subreducer 複製一份相同的slice 並在該副本上作出修改, 並返回該處理完的副本到root reducer

6. 當全部的subreducer 返回 它們的slice copies , root reducer 把全部的slices 從新整理成一個新的 state 對象.

7. store 通知 它綁定的view layer 更新 state的變化

8. 綁定的view layer 通知store 返回新的state 對象

9. view layer 觸發 rerender