实战:自定义简单版redux, enhancer与react-redux

base

[redux]core

• 解决问题：组件之间传值问题
• 状态: state
• 读写state: getState + dispatch
• 发布订阅: subscribe + publish(in dispatch)

[redux]enhancer

• 高阶函数, 比如增强dispatch功能，或者其他曾庆
• 例如redux-thunk 原本action只能接受plain对象，现在可以接受function

[redux]applyMiddleware

• 相当于 compose，参数是多个enhancer
• 将多个enhancer按顺序执行，最后合并为1个

[react-redux]core
在redux基础上(getState,dispatch,subscribe)

1. 提供Provider组件(注入store)
2. connect高阶方法(连接全局store与普通组件 && 完成自动订阅发布)

官方 react

官方react + 官方redux： 查看redux的能力

小结

• redux核心功能：提供getState,dispatch,subscribe 这几个api给开发者使用

• yarn add redux 指定4.1.2版本

• 创建store

  • start-demo-redux-my/src/redux/store.js
  • createStore(redux)，这个redux包装方法，可以提供 dispatch，subscribe，getState 给组件使用
  • reducer(开发者自定义)，这是用户希望如何处理state的方法，根据业务各不相同，包括state初始值，reducer方法，提供给dispatch使用

• 组件调用

  • start-demo-redux-my/src/component/Next.jsx
  • store.getState() 获取state
  • store.dispatch() 修改state
  • store.subscribe() 重新渲染

• 中间件

  • 可以在 createStore 传入自定义中间件
  • 中间件可以获取 dispatch getState 能力
  • 中间件在所有dispatch之前触发，因此 getState 的结果是之前的state
  • 如果是 redux-batch 批触发 dispatch，中间件对batch的action，都能捕获到 Test05Reselect3.redux-batch-enhancer.jsx
  • [todo] 能获取到 dispatch 之后的state吗？
    

自定义redux

功能：

• 自定义redux

• 实现 createStore，dispatch，subscribe，getState

• 创建简单版store:

  • start/start-demo-redux-my/src/redux/storeMy.js
  • 主体功能：state属性，dispatch方法(修改state，并执行publish方法)，getState方法(读取state)
  • 发布订阅：listens属性(用户回调)，subscribe方法(存储用户回调)，publish(执行用户回调)
  • 注意：此时 dispatch与用户reducer [没分离]

• 创建实用版store:

  • start/start-demo-redux-my/src/redux/storeMy.js
  • createStore，自实现，公共的，内部包含dispatch方法，subscribe方法，getState方法
  • reducer(开发者自定义)，这是用户希望如何处理state的方法，根据业务各不相同，包括state初始值，reducer方法，提供给dispatch使用
  • 注意：此时 dispatch与用户reducer [有分离]

• 组件调用：不变同上

  • start-demo-redux-my/src/component/Next.jsx
  • store.getState() 获取state
  • store.dispatch() 修改state
  • store.subscribe() 重新渲染

简单版

实用版

dispatch增强

enhancer的目标是什么？

• dispatch 增强: 原本只接受 action 对象 参数，增强后可以接受 fucntion 参数
• 官方redux: dispatch不能接受 function 参数，但可以通过 redux-thunk 实现
• 自定义redux enhancer: start-demo-redux-my/src/redux/storeMyEnhancer.js

// 原本调用dispatch，只接受 action 对象 
const doAdd = () =>{
   
    store.dispatch({
   type: 'ADD'});
}

// 希望改写dispatch方法，使其接受 function 参数
const doAdd = () =>{
   
    store.dispatch(dispatch =>{
   
        setTimeout(()=>{
   
            console.log('setTimeout');
            dispatch({
   type: 'ADD'});
        },1000);
    });
}

enhancer的基本原理

• enhancer基本原理: hoc 高阶函数，对原本createStore调整

  // 原本fn, 期望返回值包含参数
  function fn(a){
   
    return {
   pow: a*a}
  }

  // 做法1:直接
  function proxyFn(a){
   
    const result = fn(a);
    return {
   ...result, a}
  }

  console.log("fn(2): ",  JSON.stringify(fn(2))); // fn(2):  {"pow":4}
  console.log("proxyFn(2): ",  JSON.stringify(proxyFn(2)));  // proxyFn(2):  {"pow":4,"a":2}</