深入理解redux

pekonchan 發布于2019-08-23 14:21 / 3301人閱讀

摘要：深入簡述在快速理解中，我簡單的介紹了的基礎內容，本篇文章中，我們將再度深入。二修改我曾在快速理解中提起，為了解決模塊組件之間需要共享數據和數據可能被任意修改導致不可預料的結果的矛盾，團隊創建了。

深入Redux 簡述

在快速理解redux中，我簡單的介紹了redux的基礎內容，本篇文章中，我們將再度深入redux。

redux解決的問題

數據和函數的層層傳遞

多個組件同時修改某全局變量

一、react數據流

眾所周知，react的單向數據流是這樣的，父組件可以向子組件傳遞數據

我們通常用過狀態提升將數據存于高階函數中，使我們的子組件盡可能的更"純"，更好的實現代碼復用。

可能在頁面結構簡單的小型項目中我們還沒覺得有什么不妥，但是倘若在頁面結構稍復雜的項目中，就會變成這樣

D組件中的數據存于Container中，要通過Container -> Content -> B -> D才能到達D組件。
當然，這對我們聰明有能干的開發者們并不算什么，耗些時間也能剛出來。

Then，這種頁面，你還能搞得定嗎？

就算你能搞定，你的代碼中也有大量的冗余，從Container到N之間的所有組件都要傳遞N需要的props

所以，為了解決層層傳遞,react-redux就出現了
它利用了react中的context，在Container的context里創建store，使Container的所有子組件，孫組件等等都可以直接獲取store中的內容。

二、修改store

我曾在快速理解redux中提起，為了解決模塊（組件）之間需要共享數據和數據可能被任意修改導致不可預料的結果的矛盾，redux團隊創建了dispatch。So 不可預料的結果究竟是什么？

我們思考一個問題，假如所有的組件都以 store.xxx = xxx; // 偽代碼 這種方式修改全局變量，會引發什么問題？

我們再思考，為何python等語言會存在線程鎖，數據庫也存在鎖，操作系統的生產者/消費者問題等等
假如A和B同時修改store，store是遵從A還是遵從B？

為了避免以上情況引發死鎖redux想出了一個辦法：封裝一個dispatch函數，接收一個action對象作為參數，每當組件想要修改store時必須給dispatch傳遞action，然后再store內部根據action對象的type將dispatch分發到相應的隊列中，每一時刻僅執行一個dispatch

三、redux異步問題

思考這樣一個情景，我們從后端的接口獲取了數據，我們想將其存入store中。但是當執行到reducer時，數據是否已經獲取到？假如沒有，又該怎么辦？
就在此時，中間件出現了，例如 redux-saga, redux-thunk 等等。

redux-saga 使用了generate生成器，使開發者可以按同步思路的書寫異步代碼，再根據action的type選擇相應reducer更新store

function *fetchNodeDetailByNodeId({ payload: { nodeId } }, { call, put }) {
  try {
    const { data, status }= yield call(fetchNodeDetailByNodeId, nodeId)
    if (data && status.errmsg === "success") {
      yield put({
        type: "setStates",
        payload: {
          nodeDetailData: data,
        },
      });
    } else {
      message.info("開了個小差,再試一次吧..");
    }
  } catch (error) {
    console.log(error);
  }
},

云服務器 GPU云服務器深入理解系列深入理解linux 深入理解webrtc 深入理解python

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

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

深入淺出redux學習（-）

摘要：只要輸入的值不變，每次輸出都是一樣的值。指定位置元素運算操作如可用以下方式代替主要是生成中最核心的對象。描述發生了什么，是響應并對進行更新。生成的對象包含個方法，分別為，和。按照約定，具有字段來表示它的類型。前言：一開始接觸redux的時候最令我記住的一句話是：You Might Not Need Redux（那我還寫這篇文章干嘛？手動滑稽）回歸正題，本文主要是圍繞redux...

xietao3 2019-08-23 12:33 評論0 收藏0
redux 資料合集

摘要：資料合集學習有段時間了，相關不錯的資料整理下，希望能幫到有緣人五顆星推薦中文文檔通讀不下邊，翻譯的很好，想理解清楚，定下心來，認真讀，必有收獲官方推薦資料合集，沒有啥說的中間件深入淺出就因為看了這篇文章才更加深入學習，同時對有了別樣的看法 redux 資料合集學習redux有段時間了，相關不錯的資料整理下，希望能幫到有緣人五顆星推薦中文文檔通讀不下3邊，翻譯的很好，想理解清楚...

Alan 2019-08-19 17:14 評論0 收藏0
深入redux技術棧

摘要：另外，內置的函數在經過一系列校驗后，觸發，之后被更改，之后依次調用監聽，完成整個狀態樹的更新。總而言之，遵守這套規范并不是強制性的，但是項目一旦稍微復雜一些，這樣做的好處就可以充分彰顯出來。這一篇是接上一篇react進階漫談的第二篇，這一篇主要分析redux的思想和應用，同樣參考了網絡上的大量資料，但代碼同樣都是自己嘗試實踐所得，在這里分享出來，僅供一起學習(上一篇地址:個人博客／s...

imingyu 2019-08-20 14:22 評論0 收藏0
深入redux技術棧

摘要：另外，內置的函數在經過一系列校驗后，觸發，之后被更改，之后依次調用監聽，完成整個狀態樹的更新。總而言之，遵守這套規范并不是強制性的，但是項目一旦稍微復雜一些，這樣做的好處就可以充分彰顯出來。這一篇是接上一篇react進階漫談的第二篇，這一篇主要分析redux的思想和應用，同樣參考了網絡上的大量資料，但代碼同樣都是自己嘗試實踐所得，在這里分享出來，僅供一起學習(上一篇地址:個人博客／s...

VPointer 2019-08-01 16:19 評論0 收藏0
深入理解JavaScript

摘要：深入之繼承的多種方式和優缺點深入系列第十五篇，講解各種繼承方式和優缺點。對于解釋型語言例如來說，通過詞法分析語法分析語法樹，就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優缺點。寫在前面本文講解JavaScript各種繼承方式和優缺點。但是注意：這篇文章更像是筆記，哎，再讓我...

myeveryheart 2019-08-22 13:46 評論0 收藏0