關於Redux

1、 關於React 的運行原理

1）、View

首先咱們來看 View ，在前端開發中，咱們稱這個爲視圖層，就是展現給最終用戶的效果，在本篇教程的學習中，咱們的 View 就是 React。

2）、Store

隨着前端應用要完成的工做愈來愈豐富，咱們對前端也提出了要保持 「狀態」 的要求。在 React 中，這個 「狀態」 將保存在 this.state。在 Redux 中，這個狀態將保存在 Store。

這個 Store 從抽象意義上來講能夠看作一個前端的 「數據庫」，它保存着前端的狀態（state），而且分發這些狀態給 View，使得 View 根據這些狀態渲染不一樣的內容。

注意到，Redux 是一個可預測的 JavaScript 應用狀態管理容器，這個狀態容器就是這裏的 Store。

3）、Reducers

咱們平常生活中看到的網頁，它不是一成不變的，而是會響應用戶的 「動做」，不管是頁面跳轉仍是登錄註冊，這些動做會改變當前應用的狀態。

在 Redux 框架中，Reducers 的做用就是響應不一樣的動做。更精確地說，Reducers 是負責更新 Store 中狀態的 JavaScript 函數。

 

當咱們粗略的認知上面的這三個核心以後，咱們接下來能夠用redux去寫一些小的程序了：

   若是咱們但願展現一個 todo 列表，當一個 todo 被點擊時，它將被加上刪除線表示此 todo 已經完成，咱們還加上了一個輸入框，使得用戶能夠增長新的 todo。在底部，咱們展現了三個按鈕，能夠切換展現 todo 的類型。

整份 React 代碼組件設計以下（首先是組件，而後是組件所擁有的屬性）：

• TodoList 用來展現 todo 列表：
• todos: Array 是一個 todo 數組，它其中的每一個元素的樣子相似 { id, text, completed }。
• toggleTodo(id: number) 是當一個 todo 被點擊時會調用的回調函數。
• Todo 是單一 todo 組件：
• text: string 是這個 todo 將顯示的內容。
• completed: boolean 用來表示是否完成，若是完成，那麼樣式上就會給這個元素劃上刪除線。
• onClick() 是當這個 todo 被點擊時將調用的回調函數。
• Link 是一個展現過濾的按鈕：
• active: boolean 表明此時被選中，那麼此按鈕將不能被點擊
• onClick() 表示這個 link 被點擊時將調用的回調函數。
• children: ReactComponent 展現子組件
• Footer 用於展現三個過濾按鈕：
• filter: string 表明此時的被選中的過濾器字符串，它是 [SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE] 其中之一。
• setVisibilityFilter() 表明 Link 被點擊時將設置對應被點擊的 filter 的回調函數。
• App 是 React 根組件，最終組合其餘組件並使用 ReactDOM 對其進行編譯渲染，咱們在它的 state 上定義了上面的幾個組件會用到的屬性，同時定義了其餘組件會用到的方法，還有 nextTodoId，VisibilityFilters，getVisibleTodos 等一些輔助函數。

2、理解 Store: 數據的惟一真相來源

　　咱們前面提到了 Store 在 Redux 中的做用是用來保存狀態的，至關於咱們在前端創建了一個簡單的 」數據庫「。在目前的富狀態前端應用中，若是每一次狀態的修改（例如點擊一個按鈕）都須要與後端通訊，那麼整個網站的平均響應時間將變得難以接受，用戶體驗將糟糕透頂。

根據不徹底統計：」一個網站能留住一名用戶的時間只有 8S，若是你在 8S 內不能吸引住用戶，或者網站出現了問題，那麼你將完全地丟失這名用戶！」

因此爲了適應用戶的訪問需求，聰明的前端拓荒者們開始將後端的 「數據庫」 理念引入到前端中，這樣大多數的前端狀態能夠直接在前端搞定，徹底不須要後端的介入。

3、React 狀態「危機」

在 React 中，咱們將狀態存在每一個組件的 this.state 中，每一個組件的 state 爲組件所私有，若是要在一個組件中操做另一個組件，實現起來是至關繁瑣的。

 

4、Store是解救者

React 誕生的初衷就是爲了更好、更高效率地編寫用戶界面 ，它不該該也不須要來承擔狀態管理的職責。

因而備受折磨的前端拓荒者們構想出了偉大的 Store。咱們徹底不須要讓每一個組件單獨保持狀態，直接抽離全部組件的狀態，類比 React 組件樹，構造一箇中心化的狀態樹，這棵狀態樹與 React 組件樹一一對應，至關於對 React 組件樹進行了狀態化建模：

 

能夠看到，咱們將組件的 state 去掉，取而代之的是一棵狀態樹，它是一個普通的 JavaScript 對象。經過對象的嵌套來類比組件的嵌套組合，這棵由 JavaScript 對象建模的狀態樹就是 Redux 中的 Store。

當咱們將組件的狀態抽離出去以後，咱們在使用組件 B 操做組件 C 就變得至關簡單且高效。