黄** 笔记

1、在react中直接使用redux

• 怎么写？

1.1 创建一个context对象， 解构出了Provider组件 发布者 以及 Consumer 订阅者

1.2 将最外层redux的组件使用Provider组件包裹起来，并且使用redux库中的createStore创建了一个store，传递给Provider的value属性

1.3 子组件中使用store了, 在需要用store的子组件外面包裹 之前创建context时解构出来的Consumer， 子组件props上就能拿到store了

2、react-redux 大概原理

• react-redux 解构出了一个Provider, 还有connect这些，和react的context有什么关系？

1.1 从 react-redux 解构出了Provider 发布者

• 那我子组件怎么来订阅？ 还是Consumer？ 因为我们发现，直接在react的子组件中使用Consumer来接受store，每次都写一样的代码， 给子组件包裹在Consumer中，再取store。 所以react-redux 封装了一个高阶组件 connect，写一下connect高阶组件大概实现了什么？ 接收一个组件为参数，然后给此组件外面包裹一个Consumer， 获取到store，将store传递给接受到的组件，然后return => 效果，传进connect的组件，props上多了一个store

高阶组件、修饰器写法

总结： react-redux 是基于 redux + react中connect实现的

3、简单redux 中间件， redux-thunk、redux-saga

redux 如果需要用到 side effect 异步操作，redux-thunk 和 redux-saga 绝对是目前两个最受欢迎的中间件插件，都是解决异步问题的 thunk不说了 saga 是基于 es6 新增的 Generator

function* idMaker(){
    let index = 0;
    while(true)
        yield index++;
}

let gen = idMaker(); // "Generator { }"

console.log(gen.next().value);
// 0
console.log(gen.next().value);
// 1
console.log(gen.next().value);
// 2
// ...

4、dva？？ 阿里2015年出的框架，集成了react、react-router、redux等等， 以前是包含router等的，不需要安装react-router了（cra太基础了，啥都没有，只有react、react-dom等。啥都要自己装）。 但是当2018年低，阿里推出了umi， dva就一般只做为状态管理器了（redux + redux-saga封装）

一共6个API