Redux解決了什么問題

pinecone 發布于2019-08-23 17:15 / 807人閱讀

摘要：它搭配解決了組件之間通信問題，這個通信問題，是組件和其它組件之間也可以跨層通信，不需要一層一層的把，父組件的數據往下傳遞。庫解決了什么問題解決了跨層組件通信問題。

忽略此文，不敢浪費你的時間 Redux是什么？

Redux是Facebook提出一個數據狀態管理的庫，也可以說框架。它搭配React解決了組件之間通信問題，這個通信問題，是組件和其它組件之間也可以跨層通信，不需要一層一層的把，父組件的數據往下傳遞。這會增加代碼復雜度和維護的復雜度。

如果使用React.createContext的API也可以實現跨層通信，你可以多帶帶寫一個模塊去封裝Context.Provider和Context.Consumer，只有在根組件使用Context.Provider后，需要共享Context上的數據的組件，都可以通過引入Context.Consumer組件去獲取公共的數據。哪個組件需要頂層組件的數據，就必須引入Context.Consumer。

  //context.js
  export default Context  = createContext("")

 //app.js
 let store = createStore(reducer)

 import Context from "./context.js"
 
    {(data) => ({data.time})}

store

整個Application的數據保存地。這里有一切應用所共享的數據，后臺交互和用戶輸入的數據都在這里管理。Redux提供了一個方法，創造整個應用數據的store,只需要使用es6模塊機制，import命名可以輸出我們需要的接口。

import { createStore } from "redux"
//創建store必須，外部注入數據和改變整個state的邏輯
let store = createStore(reducer,initalPreLoadState)

action

描述界面的交互和行為的對象，用戶要做什么事，必須發送一個action對象到store的dispatch函數里面，根據提供reducer去匹配action.type，如果沒有type匹配對了，會執行接下里的邏輯，更新整個store里面該改變的數據。

store.dispatch的源代碼里，對傳入的action是否為對象做了判斷，是否有type屬性也做了判斷。如果action沒有問題，那么執行定義傳入的reducer(state,action)函數，

reducer

reducer是一個純函數，什么樣的輸入就得出什么樣的輸出，怎么理解呢? store.dispatch發送了action，當然，這個store.dispatch早就放在了標簽的事件里，等著用戶去觸發。action對象來到store.dispatch函數內存，有了action的數據，執行reducer函數，去匹配類型，執行對應的代碼。

    function add(state=0,action) {
        switch(action.type){
            case "add":
                return state + 1
            case "decre":
                return state - 1
            default:
                return state
        }
    }

改變state的唯一方式

state和view一一對應，state改變了，view也就改變了。state如何改變，界面的標簽上，給定的事件，store.dispatch函數，該函數的參數是action對象，描述要做什么事，觸發此函數，傳遞給整個應用的store，會執行store.dispatch函數里的reducer函數，去更新state，store.subscribe函數監聽store的數據發生變化，便會觸發此函數去更新React的根組件。

Redux沒有解決什么？

redux庫提供了核心一個API,createStore函數，可以把整個應用的數據也就是存放在store里面，但是它真的只提供了數據，對于組件之間的通信，redux庫是沒有解決的。store里面的數據還是得從頂層組件往下傳，一層一層傳。

如果要跨組件通信，頂層組件與任意組件通信，redux必須借助react的Context的API，結合Redux和React結合成一個庫，這樣提供的兩個API，就可以跨層通信。

React-Redux庫解決了什么問題

解決了跨層組件通信問題。

GPU云服務器云服務器云服務器ecs解決了哪些問題 sdwan解決什么問題蘋果手機連接阿里云服務器是什么問題了阿里云的服務器登錄密碼是什么問題了

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

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

【譯】Redux 還是 Mobx，讓我來解決你的困惑！

摘要：我現在寫的這些是為了解決和這兩個狀態管理庫之間的困惑。這甚至是危險的，因為這部分人將無法體驗和這些庫所要解決的問題。這肯定是要第一時間解決的問題。函數式編程是不斷上升的范式，但對于大部分開發者來說是新奇的。規模持續增長的應原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 評論0 收藏0
Redux概念之一: Redux簡介

摘要：應用這說明并不是單指設計給用的，它是獨立的一個函數庫，可通用于各種應用。在數據流的最后，要觸發最上層組件的，然后進行整體的重新渲染工作。單純在的對象上是沒有辦法使用，要靠額外的函數庫才能這樣作，這是一定要使用類似像這種函數庫的主要原因。 Redux的官網中用一句話來說明Redux是什么: Redux是針對JavaScript應用的可預測狀態容器這句話雖然簡短，其實是有幾個涵義的: ...

cjie 2019-08-20 13:59 評論0 收藏0
React 328道最全面試題(持續更新)

摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學習與思考。今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點，受到很多朋友的關注，都強烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發給大家，同時發布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...

kumfo 2019-08-26 10:13 評論0 收藏0
高級前端面試題大匯總（只有試題，沒有答案）

摘要：面試題來源于網絡，看一下高級前端的面試題，可以知道自己和高級前端的差距。面試題來源于網絡，看一下高級前端的面試題，可以知道自己和高級前端的差距。有些面試題會重復。使用過的koa2中間件 koa-body原理介紹自己寫過的中間件有沒有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理如何和MySQL進行通信 React聲明周期及自己的理解如何...

kviccn 2019-08-23 13:41 評論0 收藏0