关于redux:react篇lesson2redux知识点

提起redux小伙伴们应该都不生疏，驰名的第三方状态治理库，也是很多小伙伴进阶路上必然攻克的源码之一。Redux 除了和 React 一起用外，还反对其它界面库。 它体小精悍（只有2kB，包含依赖）。

明天咱们就来说说redux学习中须要重点学习的货色；

三大准则

Redux 能够用这三个根本准则来形容：

• 繁多数据源

  整个利用的 state 被贮存在一棵 object tree 中，并且这个 object tree 只存在于惟一一个 store 中。

• State 是只读的

  惟一扭转 state 的办法就是触发 action，action 是一个用于形容已产生事件的一般对象。

• 应用纯函数来执行批改

  为了形容 action 如何扭转 state tree ，你须要编写 reducers。

应用

其实redux应用起来大抵能够分为一下几步骤：

申明store文件(寄存state)

// store.js
import { createStore } from 'redux';
import reducer from "./reducer.js";
const store = createStore(reducer);
export default store;

申明reducer.js文件(批改state)

申明的reducer文件次要是为了批改保留的state

export default const counter = (state = 0, action) => {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
  }
};

dispatch触发action动作、subscribe订阅以及unsubscribe勾销订阅

store.dispatch({ type: 'INCREMENT' });
const unsubscribe = store.subscribe(()=> {});

知识点

以上是咱们须要理解的根底，其实redux摊开了说白了也没有什么神秘的就是一个第三方文件保留state，用特定action去触发批改，咱们须要理解的真正外围是redux对于createStore中参数enhancer的解决以及applyMiddleware的实现，这才是redux的外围；

enhancer

enhancer翻译过去就是增强器，其加强的对象就是dispatch, 容许咱们对dispach进行更改，在源码中咱们能够看到：

87行的判断如果enhancer存在并且是一个函数的状况下，createStore会在96行提前返回一个enhancer执行的柯里话函数；

因为enhancer须要对dispatch进行加强，所以enhancer须要createStore作为参数，并且在加强过程中须要调用dispatch所以须要用到reduer、preloadedState，至于柯里化更多的是为了不便组合吧！

enhancer这个函数的后果其实就是applyMiddleware函数聚合中间件的当前返回的新的store以及dispatch；
源码：在这里

applyMiddleware

接下来咱们就一起来看下middleware函数都做了什么，他是怎么聚合中间件并返回新的store以及它又是如何加强dispatch的吧！
源码是用ts编写的对于一些人来说看起来比拟麻烦，我这里改成js的写法，并且去掉了多余的throw。
以下就是applyMiddleware函数的大抵框架，首先咱们须要在enhancer传进来的参数中取出原始store以及dispatch，并且通过一系列的操作加强出新的dispatch，并返回新的store以及dispatch

export default const applyMiddleware = (...middleware) => {
  return createStore => (reducer, preloadedState) => {
    let store =  createStore(reducer, preloadedState)
    let dispach = store.dispach
    // todo 加强dispatch
    return {...store, dispach}
  }
} 

咱们加强dipatch须要执行所有的中间件函数， 因为中间件函数最初也要解决dispatch，拜访状态仓库的状态值，这也就意味着咱们须要给中间件提供redux的控制权。

比方咱们应用redux-logger打印的时候咱们打印的就是状态库中的状态值，如果拿不到redux的控制权那就拜访不到store的状态值

其实所谓的控制权就是getStore 以及dispatch；
所以咱们这样来做申明一个middlewareAPI用来接管状态仓库的控制权，咱们只须要以参数的模式传给中间件函数就能够了，大抵如下；
+为新增逻辑

export default const applyMiddleware = (...middleware) => {
  return createStore => (reducer, preloadedState) => {
    let store =  createStore(reducer, preloadedState)
    let dispach = store.dispach
    // todo 加强dispatch
    // 申明状态仓库的管制圈对象
    + const middlewareAPI = {
    +    getState: store.getState,
    +    dispatch: (action, ...args) => dispatch(action, ...args)
    +  }
    // 聚合中间件，两头是多个咱们遍历执行每一个中间件，并将控制权对象作为参数传进去。
    + const chain = middlewares.map(middleware => middleware(middlewareAPI))；
    // 返回的chain是一个新的数组，由每一个拿到控制权的中间件函数组成
    
    // 源码中用了一个compose文件专门来解决中间件的聚合
    // 为了加重用户的累赘，不可能每一个中间件都要用户手动执行，所以这里抉择用compose聚合执行一下，让用户间接拿到最初的后果。
    + dispatch = compose(...chain)(store.dispatch)

    return {...store, dispach}
  }
} 

仔细的小小搭档应该留神到了一个问题也就是咱们的仓库控制权对象中的getState是间接在store中取出来的，而dispatch却有再次封装了一下，这是什么起因呢？
这里解说下，咱们应用的dispatch，是心愿应用增强后的dispatch，因为他能够解决一些问题，如果咱们想getStore一样在store中获取，那我传下去的仍旧是老的dipatch，那加强不就没有意义了吗，所以咱们这里心愿应用的是上下文中的dispatch，也就是加强后的，所以这里要封装一次。
源码请移步这里

compose

export default function compose(...funcs) {
  if (funcs.length === 0) {
    // 这里是没有中间件的时候，然而又有参数的状况，间接申明一个函数返回参数
    return arg => arg
  }

  // 这里是只有一个中间件的时候防止应用reduce，间接返回惟一的一个中间件函数
  if (funcs.length === 1) {
    return funcs[0]
  }
 
  return funcs.reduce(
    (a, b) =>
      (...args) =>
        a(b(...args))
  )
}

源码在这里
compose 的核代码的确只有那么点，作用在在于将所有中间件以嵌套的模式执行一遍，并返回当前最终的后果。相似于fn1(fn2(fn3(params)))
不懂的能够移步我的另一篇博客，[[函数合成（compose）的多种实现办法]！](https://juejin.cn/post/700211…)
至于combineReducers 以及bindActionCreators 就不赘述了，本人看也能看的懂，就是个简略的合并store的状态。