淺析Redux數(shù)據(jù)流

chaosx110 發(fā)布于2019-08-20 18:24 / 1502人閱讀

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

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

-- React Redux 數(shù)據(jù)流

通過這張流程圖，我們可以更好的理解Redux和React直接數(shù)據(jù)如何流通，關(guān)系如何映射。

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

action & actionCreator

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

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

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

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

reducer

Reducer 函數(shù)只是一個純函數(shù)，它接收應(yīng)用程序的當前狀態(tài)以及發(fā)生的 action，然后返回修改后的新狀態(tài)（或者有人稱之為歸并后的狀態(tài)）。Reducer 函數(shù)是 action 的訂閱者。

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

  return state;
}

Store

以上，action描述“發(fā)生了什么”，而reducer根據(jù)action來更新state。但是他們兩者之間是如何關(guān)聯(lián)的呢？

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

我們把 Redux實例稱為 store 并用以下方式創(chuàng)建：

import { createStore } from "redux"

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

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

每當一個action發(fā)生時，Redux都能調(diào)用這個函數(shù)。往 createStore 傳 Reducer 的過程就是給 Redux綁定 action處理函數(shù)（也就是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(分發(fā))任何action，但是reducer被調(diào)用了！這是由于初始化應(yīng)用state的時候，Redux dispatch 了一個初始化的 action ({ type: "@@redux/INIT" })。reducer的入?yún)?b>(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，并且合并對應(yīng)的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: [] }

回過頭來看看文章開頭的數(shù)據(jù)流向圖

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

為了將Redux和React聯(lián)系到一起。就需要用到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更新。

云服務(wù)器 GPU云服務(wù)器 jdbc連接mysql數(shù)據(jù)庫的方法淺析源碼淺析 cdn淺析 Redux

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/84464.html

發(fā)表評論

登陸后可評論

0條評論

chaosx110

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 440·2023-04-25 16:38
代碼統(tǒng)計---使用SourceCounter

閱讀 1573·2021-09-26 09:46
中國服裝行業(yè)要走服裝智能制造路線

閱讀 3413·2021-09-08 09:35
LESS CSS使用及語法入門

閱讀 2835·2019-08-30 12:54
一些常用的 CSS 技巧和知識點

閱讀 3305·2019-08-29 17:06
jQuery 圖片查看插件 Magnify 開發(fā)簡介（仿 Windows 照片查看器）

閱讀 1109·2019-08-29 14:06
移動端

閱讀 3416·2019-08-29 13:00
每周前端開源推薦第四期

閱讀 3525·2019-08-28 17:53

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

淺析Redux數(shù)據(jù)流

相關(guān)文章

redux淺析

**淺析`redux-thunk`中間件源碼**

**淺析Redux源碼**

前端進階資源整理

react路由淺析

發(fā)表評論

0條評論

chaosx110

男|高級講師

TA的文章

tensorflow

代碼統(tǒng)計---使用SourceCounter

中國服裝行業(yè)要走服裝智能制造路線

LESS CSS使用及語法入門

一些常用的 CSS 技巧和知識點

jQuery 圖片查看插件 Magnify 開發(fā)簡介（仿 Windows 照片查看器）

移動端

每周前端開源推薦第四期

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

淺析Redux數(shù)據(jù)流

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！