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

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

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

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

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

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

讓我們一步步來(lái)了解圖中的各個(gè)概念。

action & actionCreator

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

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

一般約定 action 是一個(gè)擁有 type 屬性的對(duì)象。

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

reducer

Reducer 函數(shù)只是一個(gè)純函數(shù)，它接收應(yīng)用程序的當(dāng)前狀態(tài)以及發(fā)生的 action，然后返回修改后的新?tīng)顟B(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來(lái)更新state。但是他們兩者之間是如何關(guān)聯(lián)的呢？

不用擔(dān)心，Redux 會(huì)幫你把a(bǔ)ction和reducer連接起來(lái)。

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

import { createStore } from "redux"

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

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

每當(dāng)一個(gè)action發(fā)生時(shí)，Redux都能調(diào)用這個(gè)函數(shù)。往 createStore 傳 Reducer 的過(guò)程就是給 Redux綁定 action處理函數(shù)（也就是Reducer）的過(guò)程。

接下來(lái)，試著在 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" } ]

我們沒(méi)有dispatch(分發(fā))任何action，但是reducer被調(diào)用了！這是由于初始化應(yīng)用state的時(shí)候，Redux dispatch 了一個(gè)初始化的 action ({ type: "@@redux/INIT" })。reducer的入?yún)?b>(state, action)。state還沒(méi)有被初始化，自然為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，并且合并對(duì)應(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: [] }

回過(guò)頭來(lái)看看文章開(kāi)頭的數(shù)據(jù)流向圖

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

為了將Redux和React聯(lián)系到一起。就需要用到React-Redux這個(gè)庫(kù)。

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84464.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

chaosx110

男|高級(jí)講師

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

TA的文章

tensorflow

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

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

閱讀 3342·2021-09-08 09:35
LESS CSS使用及語(yǔ)法入門

閱讀 2793·2019-08-30 12:54
一些常用的 CSS 技巧和知識(shí)點(diǎn)

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

閱讀 1032·2019-08-29 14:06
移動(dòng)端

閱讀 3356·2019-08-29 13:00
每周前端開(kāi)源推薦第四期

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

redux淺析

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

**淺析Redux源碼**

前端進(jìn)階資源整理

react路由淺析

發(fā)表評(píng)論

0條評(píng)論

chaosx110

男|高級(jí)講師

TA的文章

tensorflow

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

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

LESS CSS使用及語(yǔ)法入門

一些常用的 CSS 技巧和知識(shí)點(diǎn)

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

移動(dòng)端

每周前端開(kāi)源推薦第四期

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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