Redux source code interpretation — composition source code analysis

Time:2021-5-8

Composition source code analysis

composeModule code is very concise, but the role of the implementation is very powerful.reduxWhy Redux? Some people say it isreduceandfluxThe combination of the tworeduceExactlycomposeThe core of the module.

composeThe function of the module is powerful and simpleFrom right to left, combine parameters (functions).So, pass it on tocomposeMethod parameters must be of function type (this is not judged in the source code, probably because this module is used internally in Redux and is not exposed to the outside, so it does not need strong verification.). For example:

 compose(f, g, h) ====> (...args) => f(g(h(...args)))

The code of the module is very simple, but the content involved is very important. Let’s look at it bit by bit.

What is reduce?

reduceyeses5A method of applying a function to the accumulator and each element of the array (from left to right) to reduce it to a single value. The function signature is:

arr.reduce(callback[, initialValue])

callbackIs a function that executes each element in the array. This function takes several parameters:

  • accumulator: the return value of the last callback call. If it is the first call, this value is initialvalue. If no initialvalue is provided, the first element of the array is used.
  • currentValue: the element being processed by the array
  • currentIndex: the current index of the element being processed by the array
  • array: an array that calls the reduce method

To sum up, the detailed signature of the reduce method is as follows:

arr.reduce(function (accumulator, currentValue, currentIndex, array) {}[, initialValue]) 

A few demo

  • Array summation
[1,2,3,4,5].reduce((a, b) => a + b) // 15
  • Array flattening
[[0, 1], [2, 3], [4, 5]].reduce((a, b) => {
  return a.concat(b);
}, []);  // [ 0, 1, 2, 3, 4, 5 ]

The detailed document about reduce can be referred toArray.prototype.reduce

got itreduceAfter what’s going on, let’s take a lookcomposeWhat’s the magic effect

import compose from '../src/compose'

// function f
Const f = (ARG) = >'function f (${Arg})` 

// function g
Const g = (ARG) = >'function g (${Arg})`

//The last function can take more than one parameter
Const H = (... ARG) = >'function H (${arg. Join ('')})`

const r = compose(f, g, h)

console.log(typeof r) // function

Console. Log (R (1,2,3)) // function f (function g (function H (1,2,3))_ 2_ 3)))

As can be seen from the above code:The running result of compose is a function. The parameter passed by calling this function will be the parameter of the last parameter of compose. Thus, it will be called step by step from the inside out like an onion ring.

Redux source code interpretation -- composition source code analysis

Source code

export default function compose(...funcs) {
  //FuncS is an array of all parameter functions
  //If no parameters are passed, a function is returned, which is what is input and what is obtained.
  if (funcs.length === 0) {
    return arg => arg
  }
  //When only one parameter is passed, the function is returned directly
  if (funcs.length === 1) {
    return funcs[0]
  }
  //Returns the composite function
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

That’s rightcomposeAn overall interpretation of the source code, the level is limited, welcome to brick. The following source code interpretation and test examples can focus on:Redux source code interpretation warehouse

Recommended Today

Still using go micro service? Come and try go zero, it’s beyond your imagination!

Github https://github.com/tal-tech/go-zero Rapid construction of high parallel development micro service 0. Why is it difficult to do well in micro service? In order to do a good job in micro service, we need to understand and master many knowledge points Basic function level Concurrency Control & current limiting to prevent services from being destroyed by […]