redux之compose

huayeluoliuhen 發布于2019-08-23 10:28 / 2218人閱讀

摘要：是狀態管理庫，與其他框架如是沒有直接關系，所以可以脫離在別的環境下使用。所以一共就五個文件需要看，這五個文件也就是暴露出去的五個。所以經過處理過之后，函數就變成我們想要的格式了。總結函數在函數式編程里很常見。

redux 是狀態管理庫，與其他框架如 react 是沒有直接關系，所以 redux 可以脫離 react 在別的環境下使用。由于沒有和react 相關邏輯耦合，所以 redux 的源碼很純粹，目的就是把如何數據管理好。而真正在 react 項目中使用 redux 時，是需要有一個 react-redux 當作連接器，去連接 react 和 redux 。

沒看 redux 源碼之前，我覺得看 redux 應該是件很困難的事情，因為當初在學 redux 如何使用的時候就已經被 redux 繁多的概念所淹沒。真正翻看 redux 源碼的時候，會發現 redux 源碼內容相當之少，代碼量也相當少，代碼質量也相當高，所以是非常值得看的源碼。

目錄結構

其他目錄都可以不看，直接看 ./src 吧：

.REDUXSRC
│ applyMiddleware.js
│ bindActionCreators.js
│ combineReducers.js
│ compose.js
│ createStore.js
│ index.js
│
└─utils

    actionTypes.js
    isPlainObject.js
    warning.js

index.js 就是把 applyMiddleware.js 等匯集再統一暴露出去。utils 里面就放一些輔助函數。所以一共就五個文件需要看，這五個文件也就是 redux 暴露出去的五個 API。

// index.js
import createStore from "./createStore"
import combineReducers from "./combineReducers"
import bindActionCreators from "./bindActionCreators"
import applyMiddleware from "./applyMiddleware"
import compose from "./compose"
import warning from "./utils/warning"
import __DO_NOT_USE__ActionTypes from "./utils/actionTypes"

// 忽略內容

export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose,
  __DO_NOT_USE__ActionTypes
}

compose.js

這是五個 API 里唯一一個能多帶帶拿出來用的函數，就是函數式編程里常用的組合函數，和 redux 本身沒有什么多大關系，先了解下函數式編程的一些概念：

純函數是這樣一種函數，即相同的輸入，永遠會得到相同的輸出，而且沒有任何可觀察的副作用。
代碼組合

代碼：

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

其實 compose 函數做的事就是把 var a = fn1(fn2(fn3(fn4(x)))) 這種嵌套的調用方式改成 var a = compose(fn1,fn2,fn3,fn4)(x) 的方式調用。

redux 的 compose 實現很簡潔，用了數組的 reduce 方法，reduce 的用法可以參照 mdn。

核心代碼就一句：return funcs.reduce((a,b) => (..args) => a(b(...args)))

我雖然經常寫 reduce 函數，但是看到這句代碼還是有點懵的，所以這里舉一個實際的例子，看看這個函數是怎么執行的：

import {compose} from "redux"
let x = 10
function fn1 (x) {return x + 1}
function fn2(x) {return x + 2}
function fn3(x) {return x + 3}
function fn4(x) {return x + 4}

// 假設我這里想求得這樣的值
let a = fn1(fn2(fn3(fn4(x)))) // 10 + 4 + 3 + 2 + 1 = 20

// 根據compose的功能，我們可以把上面的這條式子改成如下：
let composeFn = compose(fn1, fn2, fn3, fn4)
let b = composeFn(x) // 理論上也應該得到20

看一下 compose(fn1, fn2, fn3, fn4)根據 compose 的源碼, 其實執行的就是：
[fn1,fn2,fn3.fn4].reduce((a, b) => (...args) => a(b(...args)))

第幾輪循環	a的值	b的值	返回的值
第一輪循環	fn1	fn2	(...args) => fn1(fn2(...args))
第二輪循環	(...args) => fn1(fn2(...args))	fn3	(...args) => fn1(fn2(fn3(...args)))
第三輪循環	(...args) => fn1(fn2(fn3(...args)))	fn4	(...args) => fn1(fn2(fn3(fn4(...args))))

循環最后的返回值就是 (...args) => fn1(fn2(fn3(fn4(...args))))。所以經過 compose 處理過之后，函數就變成我們想要的格式了。

總結

compose 函數在函數式編程里很常見。這里 redux 的對 compose 實現很簡單，理解起來卻沒有那么容易，主要還是因為對 Array.prototype.reduce 函數沒有那么熟練，其次就是這種接受函數返回函數的寫法，再配上幾個連續的 => ，容易看暈。

這是 redux 解讀的第一篇，后續把幾個 API 都講一下。特別是 applyMiddleware 這個 API 有用到這個 compose 來組合中間件，也是有那么一個點比較難理解。

云服務器 GPU云服務器 Redux -compose Composer compose

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

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

Redux 莞式教程之進階篇

摘要：進階教程原文保持更新寫在前面相信您已經看過簡明教程，本教程是簡明教程的實戰化版本，伴隨源碼分析用的是編寫，看到有疑惑的地方的，可以復制粘貼到這里在線編譯總覽在的源碼目錄，我們可以看到如下文件結構打醬油的，負責在控制臺顯示警告信息入口文件除去 Redux 進階教程原文（保持更新）：https://github.com/kenberkele... 寫在前面相信您已經看過 Redux ...

岳光 2019-08-20 10:27 評論0 收藏0
React系列之 Redux 架構模式

摘要：原文地址沒想到這篇文章這么晚才出，最近發生了太多的事情，已致于心態全無，最終也離開了現在的公司，沒想到是這么的狼狽一個人的光芒可以放到很大也可以小到微乎其微，如果不能好好的規劃最終也只能默默的承受世上沒有相同的感同身受，感受真實才能真正的原文地址：https://gmiam.com/post/react-... 沒想到這篇文章這么晚才出，最近發生了太多的事情，已致于心態全無，最終也離...

xfee 2019-08-20 12:06 評論0 收藏0
Redux story-1:who creates it?

摘要：而不是卷入無休止的撕逼，用了某某而產生的優越，甚至借貶低他人來抬高自己。前言 ?這是一個系列文章，旨在分享在react及相關技術棧實踐過程中的個人感悟，心得。如果有不好的地方，歡迎各位批評指正。 ?由于對react本身還未深入了解，今天我們先來談一談redux相關的問題。 Who creates it? ?Dan Abramov是redux的作者，同時，他也是Create React...

lavor 2019-08-20 13:52 評論0 收藏0
簡單介紹redux的中間件

摘要：改地方就是將塞進所有的中間件中，然后返回一個函數，而中間件的形式后面會說到。流程圖異步信息說道這里應該會對中間件有個大致的認識，接下來介紹一下常用的中間件以及自己寫一個中間件。用過react的同學都知道在redux的存在，redux就是一種前端用來存儲數據的倉庫，并對改倉庫進行增刪改查操作的一種框架，它不僅僅適用于react，也使用于其他前端框架。研究過redux源碼的人都覺得該源碼...

philadelphia 2019-08-22 16:03 評論0 收藏0
淺析Redux源碼

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

lifesimple 2019-08-22 17:13 評論0 收藏0