React學習筆記（五） Redux應用架構

核心運作流程如下：

使用單一資料來源的好處在於整個應用狀態都儲存在乙個物件中，這樣可以隨時提取出整個應用的狀態進行持久化。此外，這樣的設計也為服務端渲染提供可能。

在redux中，並不會用**來定義乙個store。而是定義乙個reducer，它的功能時根據當前觸發的action與當前應用的狀態進行迭代，這裡並沒有直接修改應用的狀態，而是返回了乙份全新的狀態。

在redux裡，通過定義reducer來確定狀態的修改，而每乙個reducer都是純函式。

redux的核心是乙個store，它由redux提供的createstore(reducers[, initialstate])方法生成。

僅有createstore方法還不足以讓redux在react應用中發揮作用，還需要react-redux庫。

它提供乙個分類處理action的機會。

如圖：

diapatch = compose(...chain)(store.dispatch);

有3個常用的middleware：redux-thunk, redux-promise, redux-composable-fetch。

1.輪詢

2.多非同步串聯

3.redux-saga

在react生態環境中，react router是公認的最優秀的路由解決方案。它提供了與react思想十分貼合的宣告式路由系統。可以通過、這兩個標籤以及一系列屬性定義整個react應用的路由方案。

但在redux中，應用程式的所有狀態都應該儲存在乙個單一的store中，而當前的路由狀態很明顯也屬於應用狀態的一部分。如果直接使用react router，就意味著所有路由相關的資訊脫離的redux store的控制，這樣就違背了redux的設計思想，也給應用帶來了更多的不確定性。

此時就需要一種解決方案。

流程圖如下：

如下：

react router redux提供了api——synchistorywithstore來完成與redux store的繫結工作。

在redux應用中需要改變路由時，也要分發乙個action。但在這之前，需要對redux的store進行一些增強，以便分發的action能被正確識別。

意為元件是怎麼工作的，更具體就是資料是怎麼更新的。它不會包含任何virtual dom的修改與組合，也不會包含元件的樣式。

意為元件時怎麼渲染的。它包含了virtual dom的修改與組合，有可能包含元件的樣式。同時，它不依賴任何形式的store。一般可寫成無狀態函式，但實際上展示型元件並不一定都是無狀態的元件，因為展示型元件裡依然存在生命週期方法。