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

資訊專欄INFORMATION COLUMN

redux之compose

huayeluoliuhen / 2227人閱讀

摘要：是狀態(tài)管理庫，與其他框架如是沒有直接關(guān)系，所以可以脫離在別的環(huán)境下使用。所以一共就五個(gè)文件需要看，這五個(gè)文件也就是暴露出去的五個(gè)。所以經(jīng)過處理過之后，函數(shù)就變成我們想要的格式了。總結(jié)函數(shù)在函數(shù)式編程里很常見。

redux 是狀態(tài)管理庫，與其他框架如 react 是沒有直接關(guān)系，所以 redux 可以脫離 react 在別的環(huán)境下使用。由于沒有和react 相關(guān)邏輯耦合，所以 redux 的源碼很純粹，目的就是把如何數(shù)據(jù)管理好。而真正在 react 項(xiàng)目中使用 redux 時(shí)，是需要有一個(gè) react-redux 當(dāng)作連接器，去連接 react 和 redux 。

沒看 redux 源碼之前，我覺得看 redux 應(yīng)該是件很困難的事情，因?yàn)楫?dāng)初在學(xué) redux 如何使用的時(shí)候就已經(jīng)被 redux 繁多的概念所淹沒。真正翻看 redux 源碼的時(shí)候，會(huì)發(fā)現(xiàn) redux 源碼內(nèi)容相當(dāng)之少，代碼量也相當(dāng)少，代碼質(zhì)量也相當(dāng)高，所以是非常值得看的源碼。

目錄結(jié)構(gòu)

其他目錄都可以不看，直接看 ./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 等匯集再統(tǒng)一暴露出去。utils 里面就放一些輔助函數(shù)。所以一共就五個(gè)文件需要看，這五個(gè)文件也就是 redux 暴露出去的五個(gè) 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"

// 忽略內(nèi)容

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

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

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

代碼：

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)))
}

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

redux 的 compose 實(shí)現(xiàn)很簡(jiǎn)潔，用了數(shù)組的 reduce 方法，reduce 的用法可以參照 mdn。

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

我雖然經(jīng)常寫 reduce 函數(shù)，但是看到這句代碼還是有點(diǎn)懵的，所以這里舉一個(gè)實(shí)際的例子，看看這個(gè)函數(shù)是怎么執(zhí)行的：

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}

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

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

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

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

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

總結(jié)

compose 函數(shù)在函數(shù)式編程里很常見。這里 redux 的對(duì) compose 實(shí)現(xiàn)很簡(jiǎn)單，理解起來卻沒有那么容易，主要還是因?yàn)閷?duì) Array.prototype.reduce 函數(shù)沒有那么熟練，其次就是這種接受函數(shù)返回函數(shù)的寫法，再配上幾個(gè)連續(xù)的 => ，容易看暈。

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

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

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

相關(guān)文章

  • Redux 莞式教程 之 進(jìn)階篇

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

    岳光 評(píng)論0 收藏0

  • React系列之 Redux 架構(gòu)模式

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

    xfee 評(píng)論0 收藏0

  • Redux story-1:who creates it?

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

    lavor 評(píng)論0 收藏0

  • 簡(jiǎn)單介紹redux的中間件

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

    philadelphia 評(píng)論0 收藏0

  • 淺析Redux源碼

    摘要：用法源碼由在年創(chuàng)建的科技術(shù)語。我們除去源碼校驗(yàn)函數(shù)部分，從最終返回的大的來看。這個(gè)返回值無法被識(shí)別。洋蔥模型我們來看源碼源碼每個(gè)都以作為參數(shù)進(jìn)行注入，返回一個(gè)新的鏈。改變?cè)冀M數(shù)，是一種副作用。 @(Redux)[|用法|源碼] Redux 由Dan Abramov在2015年創(chuàng)建的科技術(shù)語。是受2014年Facebook的Flux架構(gòu)以及函數(shù)式編程語言Elm啟發(fā)。很快，Redux因其...

    lifesimple 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<