关于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 的状态。