如何通俗易懂的理解 redux

RaoMeng 發布于2019-08-21 17:53 / 1303人閱讀

摘要：的學習筆記首先先了解下什么是框架框架視圖用戶界面。創建數組，保存監聽函數獲取倉庫中當前狀態只有調用方法才能更新倉庫合并狀態執行監聽函數，更新添加監聽函數由于每次執行后，都會執行所以這一行的作用就是在初始化中所有的節點。

redux的學習筆記 首先先了解下什么是MVC框架

MVC框架（Model-View-Controller）

視圖（View）：用戶界面。 => 傳送指令到 Controller

控制器（Controller）：業務邏輯 => 完成業務邏輯后，要求 Model 改變狀態

模型（Model）：數據保存 => 將新的數據發送到 View，用戶得到反饋

來個小故事幫助理解

故事的主人公小明，辛苦打拼多年，終于存到了買房的錢，于是就屁顛屁顛的在首都的郊區買了一套120的毛坯房（當前的房子的state），因為是毛坯房，自然是出了一些基礎設施其他啥也沒有（initState），這問題就來了，這毛坯房也不能住啊，這剛買完房也沒多少積蓄了，就想著找裝修公司簡裝下，問了價格之后，小明直接就憑著當年在幼兒園打下的美術基礎畫了一張設計圖,然后就和自己老婆分配了任務，誰該做什么，例如小明粉刷墻，經過多天努力，總算是裝修完成了，此時小明的新房，從一個毛坯房，變成了一個豪華的毛坯房（更新之后的房子的state）

1.首先回顧下這個故事：小名的毛坯房 --> 畫出裝修圖紙 --> 小明分配任務 --> 小明和自己老婆裝修 --> 豪華毛坯房
2.再來說下Redux里的幾個核心概念,這里我們把React也加進來：

view(React)

store(state)

action

reducer

3.接下來看看Redux/React與這個故事的聯系：

view(React) = 第一次看到毛坯房

store(state) = 毛坯房空空如也，什么都沒有，只有基礎設施

action = 小明分配任務(誰應該干什么)

reducer = 具體任務都干些什么(小明粉刷墻)

4.所以這個過程應該是這樣的
view ---> action ---> reducer ---> store(state) ---> view

5.如果放入一個web app中，首先store(state)決定了view，然后用戶與view的交互會產生action，這些action會觸發reducer因而改變state，然后state的改變又造成了view的變化。

redux 源碼簡單分析

redux中主要方法:

createStore

combineReducers

bindActionCreators

applyMiddleWare

compose

這里主要分析一下createStore(reducer)

原函數有三個參數，這里只分析第一個參數reducer
參數:reducer

reducer: function類型（而且是純函數），reducer的作用是，根據指定的action的type，進行處理state，返回新的state

參數:

action: 是一個對象或者函數（最終返回的也是對象），type是action必須有的屬性，reducer根據action.type處理state

state: 需要在這里初始化state，不然會報錯

因為reducer合并狀態是覆蓋式，所以需要先解構出當前狀態，再進行處理

store的返回值:返回值是三個方法

dispatch: 分發action，只能用dispatch修改store中的狀態

根據action查詢reducer中變state的方法，更新store tree

變更store tree后，依次執行listener中所有響應函數

getState: 獲取倉庫中當前狀態

subscribe: 注冊監聽函數，監聽state的變化

store 可以理解為一個全局變量，保存著你項目中所有需要保存的數據，而這個全局變量加了一把密碼鎖，只有指定的密碼（dispatch（{type:AAA}））進行修改，因為你想啊，若是誰都能修改這個全局變量，而在你用這個變量之前，可能執行的其他程序已經對這個變量進行了修改，這也是我們平時開發的時候避免全局變量的原因，所以就要提高修該數據的權限。

    let createStore = (reducer)=>{
        var state;
        let listeners = []; 
         //創建數組，保存監聽函數
    
        let getState = ()=>state;
       // 獲取倉庫中當前狀態
       
        function dispatch(action){
            // 只有調用dispatch方法才能更新倉庫
            state = reducer(state,action);
            // 合并狀態
            listeners.forEach(listener=>listener());
            //執行監聽函數，更新view
        }
        
        let subscribe = (listener)=>{
        listeners.push(listener);
        // 添加監聽函數
        }
        dispatch({})
        // 由于每次dispatch執行后，redux都會執行reducer
        //所以這一行的作用就是在初始化store tree中所有的state節點。
        return {
            getState,
            dispatch,
            subscribe
        }
    }

GPU云服務器云服務器 docker是什么通俗易懂云計算的通俗解釋如何理解云計算如何理解深度學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90172.html

前端進階資源整理

摘要：前端進階進階構建項目一配置最佳實踐狀態管理之痛點分析與改良開發中所謂狀態淺析從時間旅行的烏托邦，看狀態管理的設計誤區使用更好地處理數據愛彼迎房源詳情頁中的性能優化從零開始，在中構建時間旅行式調試用輕松管理復雜狀態如何把業務邏輯這個故事講好和前端進階 webpack webpack進階構建項目(一) Webpack 4 配置最佳實踐 react Redux狀態管理之痛點、分析與...

BlackMass 2019-08-23 12:36 評論0 收藏0
對React-redux中connect方法的理解

摘要：應用中唯一的狀態應用的子組件例子方法來看下函數到底是如何將和組件聯系在一起的，注意到文檔中有這樣的一句話并不會改變它連接的組件，而是提供一個經過包裹的組件。關于React-redux Redux是React全家桶的重要一員，之前在知乎上也看到類似的提問：該如何通俗易懂的理解Redux? Redux是JavaScript的狀態容器，Redux的概念簡單明了： 1. 應用中所有的狀...

Bryan 2019-08-20 18:25 評論0 收藏0
react+react-router4+redux最新版構建分享

摘要：相關配置請參考中文文檔。關于的更多使用方法及理解需要詳細具體講解，涉及篇幅較大，本文暫不涉及，有興趣可以看文檔中文文檔，我會整理后再單獨章節分享接下來我們將編寫路由組件這與有一些差別，原來的方法已經不再使用，在中或組件從中引入。 ??????相信很多剛入坑React的小伙伴們有一個同樣的疑惑，由于React相關庫不斷的再進行版本迭代，網上很多以前的技術分享變得不再適用。比如react-...

weapon 2019-08-21 11:53 評論0 收藏0
神經網絡中的梯度下降與反向傳播的關系（大白話，通俗易懂版本）

摘要：損失函數的作用可以理解為當前向傳播得到的預測值與真實值接近時，取較小值。神經網絡神經網絡就是一個萬能的模型+誤差修正函數，每次根據訓練得到的結果與預想結果進行誤差分析，進而修改權值和閾值，一步一步得到能輸出和預想結果一致的模型。舉一個例子：比如某廠商生產一種產品，投放到市場之后得到了消費者的反饋，根據消費者的反饋，廠商對產品進一步升級，優化，從而生產出讓消費者更滿意的產品。這就是...

鄒立鵬 2019-07-31 11:30 評論0 收藏0
通俗易懂的Java線程池原理

摘要：前言最近發現很多小伙伴對于線程池的原理不是特別的理解，所以想通過這篇文章來讓大家更好的認識線程池的原理，了解到其是如何工作的講解下面我會將線程池比作一個公司的一個部門，介紹線程池如何工作的，同時介紹其中的一些關鍵組件和參數。前言最近發現很多小伙伴對于Java線程池ThreadPoolExecutor的原理不是特別的理解，所以想通過這篇文章來讓大家更好的認識線程池的原理，了解到其是如...

宋華 2019-08-16 18:27 評論0 收藏0