составить из редукса

внешний интерфейс JavaScript React.js Redux

reduxЯвляется управлением государственной библиотекой, как с другими рамкамиreactне имеет прямого отношения, поэтомуreduxмогут покинутьreactИспользование в других средах. Так как нет иreactсвязанная логическая связь, поэтомуreduxИсходный код очень чистый, цель состоит в том, чтобы хорошо управлять данными. и действительно вreactиспользуется в проектеredux, необходимо иметьreact-reduxв качестве разъема, для соединенияreactа такжеredux.

Я не виделreduxПеред исходным кодом, я думаю, посмотрите наreduxЭто должно быть очень сложно, потому что я училсяreduxКак использовать, когда это былоreduxОшеломлен таким количеством понятий. действительно просмотретьreduxКогда исходный код, вы найдетеreduxСодержание исходного кода довольно маленькое, объем кода также довольно небольшой, а качество кода довольно высокое, так что это очень полезный исходный код.

Структура каталогов

Вам не нужно смотреть на другие каталоги, просто посмотрите на него напрямую./srcБар:

.\РЕДУКС\СРЦ │ applyMiddleware.js │ bindActionCreators.js │ combReducers.js │ compose.js │ createStore.js │ index.js │ └─утилиты actionTypes.js isPlainObject.js предупреждение.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)))

какой цикл стоимость значение б возвращаемое значение
первый цикл 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В объединении промежуточного ПО тоже есть момент, который сложно понять.

Категории