redux中compose的學習

在學習compose函數以前，咱們先來回憶一下reduce函數

arr.reduce(callback[, initialValue])
複製代碼

callback有四個參數，分別是：

• accumulator: 它是初始值，也是累加器返回的值
• currentValue: 當前正在參與計算的元素
• currentIndex(可選)：當前currentValue的索引，若是recude沒有第二個參數，currentIndex是從0開始，若是有第二個參數，那麼就從1開始。
• array(可選)：調用reduce函數的數組

var a  = []
a.reduce(function(acc, curr, i){
  return acc + curr
},10)
// 10
複製代碼

注意：若是是空數組調用reduce函數會報錯： Uncaught TypeError: Reduce of empty array with no initial value。 可是若是給accumulator一個初始值，做爲reduce的第二個參數，這樣空數組也就不會報錯啦。

redux中的 compose是 redux暴露出來的一個惟一能夠單獨使用的api ，由於它其實和redux自己沒有很大的關係，而是函數式編程的組合函數（也就是數學中的複合函數）。

它大概長這個樣子

//將幾個函數拼湊在一塊兒，產生一個新的函數
var a = compose(f1, f2, f3)(x) 
//其實執行的是[f1,f2,f3].reduce((a, b) => (...args) => a(b(...args)))
//從右到左依次執行括號中的函數，第一個執行完的結果做爲第二個函數執行時的參數，而後迭代下去。
複製代碼

在redux中是這樣實現compose的

//在redux中的compose函數，它使用了reduce方法。
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是怎麼工做的了，那就看一下在項目中遇到的compose

const Header = compose(
  withTranslation('nav', 'branding'), //是一個國際化的東東（i18n）
  connect(state => ({
    user: state.profile.user || {},
    pathname: state.router.location?.pathname || '',
    expireTime: state.profile.license?.not_valid_after || 0,
  })),
)(
  class Header extends PureComponent {
    render() {
      const { user, t, expireTime, pathname } = this.props
      return (
        <StyledHeader>
        xxx
        </StyledHeader>
      )
    }
  },
)
export default Header
複製代碼

emmm....理解的比較淺，但願大佬們能夠多加指點🙏

不要吹滅你的靈感和你的想象力; 不要成爲你的模型的奴隸。 ——文森特・梵高