淺析Redux數據流

chaosx110 發布于2019-08-20 18:24 / 1453人閱讀

摘要：原文地址數據流通過這張流程圖，我們可以更好的理解和直接數據如何流通，關系如何映射。函數只是一個純函數，它接收應用程序的當前狀態以及發生的，然后返回修改后的新狀態或者有人稱之為歸并后的狀態。的更新意味著更新。

原文地址：https://github.com/YutHelloWo...

-- React Redux 數據流

通過這張流程圖，我們可以更好的理解Redux和React直接數據如何流通，關系如何映射。

讓我們一步步來了解圖中的各個概念。

action & actionCreator

action creator 就是函數而已,負責構建一個 action （是的，action creator 這個名字已經很明顯了）并返回它。通過幾行簡單的代碼就可以解釋清楚了！

const actionCreator = function () {
  return {
    type : "AN_ACTION"
  }
}

一般約定 action 是一個擁有 type 屬性的對象。

console.log(actionCreator())
//  { type: "AN_ACTION" }

reducer

Reducer 函數只是一個純函數，它接收應用程序的當前狀態以及發生的 action，然后返回修改后的新狀態（或者有人稱之為歸并后的狀態）。Reducer 函數是 action 的訂閱者。

const reducer = function (state = {}, action) {
  console.log("reducer was called with state", state, "and action", action);

  return state;
}

Store

以上，action描述“發生了什么”，而reducer根據action來更新state。但是他們兩者之間是如何關聯的呢？

不用擔心，Redux 會幫你把action和reducer連接起來。

我們把 Redux實例稱為 store 并用以下方式創建：

import { createStore } from "redux"

const store_0 = createStore(() => {})

注意：在createStore時，需要給它傳入一個 reducer 函數。

每當一個action發生時，Redux都能調用這個函數。往 createStore 傳 Reducer 的過程就是給 Redux綁定 action處理函數（也就是Reducer）的過程。

接下來，試著在 Reducer 中打印一些 log

const reducer = function (...args) {
  console.log("Reducer was called with args", args)
}

const store_1 = createStore(reducer)
// 輸出：Reducer was called with args [ undefined, { type: "@@redux/INIT" } ]

我們沒有dispatch(分發)任何action，但是reducer被調用了！這是由于初始化應用state的時候，Redux dispatch 了一個初始化的 action ({ type: "@@redux/INIT" })。reducer的入參為(state, action)。state還沒有被初始化，自然為undefined。

如何讀取store中的state?

Redux為我們提供了store.getState()方法。

import { createStore } from "redux"

const reducer_2 = function (state = {}, action) {
  console.log("reducer_2 was called with state", state, "and action", action)

  return state;
}

const store_2 = createStore(reducer_2)
// 輸出: reducer_2 was called with state {} and action { type: "@@redux/INIT" }

console.log("store_2 state after initialization:", store_2.getState())
// 輸出: store_2 state after initialization: {}

如何dispatch action?

我們需要使用store.dispatch(action)方法。

// 接以上代碼
const anAction = {
  type : "AN_ACTION"
}
store_2.dispatch(anAction);
// 輸出：reducer_2 was called with state {} and action { type: "AN_ACTION" }

combineReducers

combineReducer用于合并Reducers，并且合并對應的State。

const userReducer  = function (state = {}, action) {
  console.log("userReducer was called with state", state, "and action", action)

  switch (action.type) {
    // etc.
    default:
      return state;
  }
}
const itemsReducer = function (state = [], action) {
  console.log("itemsReducer was called with state", state, "and action", action)

  switch (action.type) {
    // etc.
    default:
      return state;
  }
}
import { createStore, combineReducers } from "redux"

const reducer = combineReducers({
  user  : userReducer,
  items : itemsReducer
})

// 輸出：
// userReducer was called with state {} and action { type: "@@redux/INIT" }
// userReducer was called with state {} and action { type: "@@redux/PROBE_UNKNOWN_ACTION_9.r.k.r.i.c.n.m.i" }
// itemsReducer was called with state [] and action { type: "@@redux/INIT" }
// itemsReducer was called with state [] and action { type: "@@redux/PROBE_UNKNOWN_ACTION_4.f.i.z.l.3.7.s.y.v.i" }

var store_0 = createStore(reducer)

// 輸出：
// userReducer was called with state {} and action { type: "@@redux/INIT" }
// itemsReducer was called with state [] and action { type: "@@redux/INIT" }

console.log("store_0 state after initialization:", store_0.getState())
// 輸出：
// store_0 state after initialization: { user: {}, items: [] }

回過頭來看看文章開頭的數據流向圖

View組件通過click等事件，dispatch一個(actionCreator返回的)action，通過Store把當前狀態state和action傳遞給訂閱者reducer函數,reducer返回一個新的狀態存儲在Store中，Store又把新的State傳遞給View組件觸發組件更新。

為了將Redux和React聯系到一起。就需要用到React-Redux這個庫。

import { connect } from "react-redux"
const containerComponent = connect(mapStateToProps, mapDispatchToProps)(presentationalComponent)

簡單來說，mapStateToProps和mapDispatchToProps就是分別把Redux的state,和dispatch(action)映射到React組件中作為props。connect將展示組件(presentationalComponent)封裝成高階的容器組件(containerComponent)。state的更新意味著props更新。

云服務器 GPU云服務器 jdbc連接mysql數據庫的方法淺析源碼淺析 cdn淺析 Redux

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

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

redux淺析

摘要：概念是一個狀態管理容器使用可以更好的管理和監測組件之間需要通信的數據。參考源碼參考鏈接 redux概念 redux是一個狀態管理容器,使用redux可以更好的管理和監測組件之間需要通信的數據。 redux基本原則單一數據源在redux中,整個應用保持一個數據源,數據源是一個樹形的結構狀態只讀狀態只讀意思是不能直接修改,需要通過dispatch action方式才可以,返回的是一...

galois 2019-08-22 16:40 評論0 收藏0
淺析`redux-thunk`中間件源碼

摘要：大多的初學者都會使用中間件來處理異步請求，其理解簡單使用方便具體使用可參考官方文檔。源碼的源碼非常簡潔，出去空格一共只有行，這行中如果不算上則只有行。官方文檔中的一節講解的非常好，也確實幫我理解了中間件的工作原理，非常推薦閱讀。總覺得文章也應該是有生命力的，歡迎關注我的Github上的博客，這里的文章會依據我本人的見識，逐步更新。大多redux的初學者都會使用redux-thunk...

wing324 2019-08-21 17:17 評論0 收藏0
淺析Redux源碼

摘要：用法源碼由在年創建的科技術語。我們除去源碼校驗函數部分，從最終返回的大的來看。這個返回值無法被識別。洋蔥模型我們來看源碼源碼每個都以作為參數進行注入，返回一個新的鏈。改變原始組數，是一種副作用。 @(Redux)[|用法|源碼] Redux 由Dan Abramov在2015年創建的科技術語。是受2014年Facebook的Flux架構以及函數式編程語言Elm啟發。很快，Redux因其...

lifesimple 2019-08-22 17:13 評論0 收藏0
前端進階資源整理

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

BlackMass 2019-08-23 12:36 評論0 收藏0
react路由淺析

摘要：瀏覽器端使用的和集成使用時會用到中路由分類基于提供的和事件來保持和的同步。路由剖析在上面的示例中是轉發的樞紐在這個中轉站有很多線路通過開關可以啟動列車的運行乘坐列車就可以發現新大陸。引言在使用react做復雜的spa開發中,開發中必不可少的就是react-router,它使用Lerna管理多個倉庫, 在browser端常使用的幾個如下所示 react-router 提供了路由的...

jackzou 2019-08-22 16:12 評論0 收藏0