Redux的学习

迷南。 2024-04-18 16:25 65阅读 0赞

## 前言 ##

记得开始接触 react 技术栈的时候，最难理解的地方就是 redux。全是新名词：reducer、store、dispatch、middleware 等等，我就理解 state 一个名词。

网上找的 redux 文章，要不有一本书的厚度，要不很玄乎，晦涩难懂，越看越觉得难，越看越怕，信心都没有了！

花了很长时间熟悉 redux，慢慢的发现它其实真的很简单。本章不会把 redux 的各种概念，名词解释一遍，这样和其他教程没有任何区别，没有太大意义。我会带大家从零实现一个完整的 redux，让大家知其然，知其所以然。

开始前，你必须知道一些事情：

*  redux 和 react 没有关系，redux 可以用在任何框架中，忘掉 react。
 *  connect 不属于 redux，它其实属于 react-redux，请先忘掉它，下一章节，我们会介绍它。
 *  请一定先忘记 reducer、store、dispatch、middleware 等等这些名词。
 *  redux 是一个状态管理器。  
    Let’s Go！

## 状态管理器 ##

### 简单的状态管理器 ###

redux 是一个状态管理器，那什么是状态呢？状态就是数据，比如计数器中的 count。

let state = { 
      count: 1
    }

我们来使用下状态

console.log(state.count);

我们来修改下状态

state.count = 2;

好了，现在我们实现了状态（计数）的修改和使用了。  
![在这里插入图片描述][20190909160917824.png]  
当然上面的有一个很明显的问题：修改 count 之后，使用 count 的地方不能收到通知。我们可以使用发布-订阅模式来解决这个问题。

/*------count 的发布订阅者实践------*/
    let state = { 
      count: 1
    };
    let listeners = [];  //定义一个名为listeners的数组 这个数组里面专门存储function
    
    /*订阅*/
    function subscribe(listener) {   //说明：这里的listener是一个函数
      listeners.push(listener);    //每当有新的订阅者加入时，立马加入到listeners数组中
    }
    
    function changeCount(count) {   
      state.count = count;
      /*当 count 改变的时候，我们要去通知所有的订阅者*/
      for (let i = 0; i < listeners.length; i++) { 
        const listener = listeners[i]; //说明：listeners数组里的每一个数组元素都是一个函数
        listener();    
      }
    }

我们来尝试使用下这个简单的计数状态管理器。

/*来订阅一下，当 count 改变的时候，我要实时输出新的值*/
    subscribe(() => { 
      console.log(state.count);
    });

当我们需要修改state里存储的数据的时候

/*我们来修改下 state，当然我们不能直接去改 state 了，我们要通过 changeCount 来修改*/
    changeCount(2);
    changeCount(3);
    changeCount(4);

现在我们可以看到，我们修改 count 的时候，会输出相应的 count 值。

现在有两个新的问题摆在我们面前

*  这个状态管理器只能管理 count，不通用
 *  公共的代码要封装起来  
    我们尝试来解决这个问题，把公共的代码封装起来

我们来使用这个状态管理器管理多个状态 counter 和 info 试试

到这里我们完成了一个简单的状态管理器。

这里需要理解的是 createStore，提供了 changeState，getState，subscribe 三个能力。

### 有计划的状态管理器 ###

我们用上面的状态管理器来实现一个自增，自减的计数器。

你一定发现了问题，count 被改成了字符串 `abc`，因为我们对 count 的修改没有任何约束，任何地方，任何人都可以修改。

我们需要约束，不允许计划外的 count 修改，我们只允许 count 自增和自减两种改变方式！

那我们分两步来解决这个问题

1.  制定一个 state 修改计划，告诉 store，我的修改计划是什么。
2.  修改 store.changeState 方法，告诉它修改 state 的时候，按照我们的计划修改。

我们来设置一个 plan 函数，接收现在的 state，和一个 action，返回经过改变后的新的 state。

/*注意：action = {type:'',other:''}, action 必须有一个 type 属性*/
    function plan(state, action) {   //如果我们调用这个函数的话，我们需要给该函数传入state对象和action
      switch (action.type) {     //然后根据action.type的值对state对象进行修改
        case 'INCREMENT':
          return { 
            ...state,
            count: state.count + 1
          }
        case 'DECREMENT':
          return { 
            ...state,
            count: state.count - 1
          }
        default:
          return state;
      }
    }

我们把这个计划告诉 store，store.changeState 以后改变 state 要按照我的计划来改。

/*增加一个参数 plan*/
    const createStore = function (plan, initState) {   //定义一个createStore 函数
      let state = initState;  //对store对象进行初始化
      let listeners = [];  //这里的listeners是一个数组，且数组里面的每一个数组元素都是函数
      function subscribe(listener) { 
        listeners.push(listener);
      }
    
      function changeState(action) {   
        /*请按照我的计划修改 state*/  
        state = plan(state, action);  //这里的plan 对应 const createStore = function (plan, initState)里的plan
        for (let i = 0; i < listeners.length; i++) { 
          const listener = listeners[i];
          listener();  //修改完后，通知所有listener
        } 
      }
    
      function getState() { 
        return state;
      }
    
      return { 
        subscribe,
        changeState,
        getState
      }
    }

我们来尝试使用下新的 createStore 来实现自增和自减

到这里为止，我们已经实现了一个有计划的状态管理器！  
我们商量一下吧？我们给 plan 和 changeState 改下名字好不好？`plan 改成 reducer，changeState 改成 dispatch`！不管你同不同意，我都要换，因为新名字比较厉害（其实因为 redux 是这么叫的）!

## 多文件协作 ##

### reducer 的拆分和合并 ###

这一小节我们来处理下 reducer 的问题。啥问题？

我们知道 reducer 是一个计划函数，接收老的 state，按计划返回新的 state。那我们项目中，有大量的 state，每个 state 都需要计划函数，如果全部写在一起会是啥样子呢？

所有的计划写在一个 reducer 函数里面，会导致 reducer 函数及其庞大复杂。按经验来说，我们肯定会按组件维度来拆分出很多个 reducer 函数，然后通过一个函数来把他们合并起来。

我们来管理两个 state，一个 counter，一个 info。

let state = { 
      counter: { 
        count: 0
      },
      info: { 
        name: '前端九部',
        description: '我们都是前端爱好者！'
      }
    }

他们各自的 reducer

/*counterReducer, 一个子reducer*/
    /*注意：counterReducer 接收的 state 是 state.counter*/
    function counterReducer(state, action) { 
      switch (action.type) { 
        case 'INCREMENT':
          return { 
            count: state.count + 1
          }
        case 'DECREMENT':
          return { 
            ...state,
            count: state.count - 1
          }
        default:
          return state;
      }
    }

/*InfoReducer，一个子reducer*/
    /*注意：InfoReducer 接收的 state 是 state.info*/
    function InfoReducer(state, action) { 
      switch (action.type) { 
        case 'SET_NAME':
          return { 
            ...state,
            name: state.name
          }
        case 'SET_DESCRIPTION':
          return { 
            ...state,
            description: state.description
          }
        default:
          return state;
      }
    }

那我们用 combineReducers 函数来把多个 reducer 函数合并成一个 reducer 函数。大概这样用

const reducer = combineReducers({    
        counter: counterReducer,
        info: InfoReducer
    });

我们尝试实现下 combineReducers 函数

//这里的reducers是一个对象{ 
    // counter: counterReducer,
    // info: InfoReducer
    //}
    
    function combineReducers(reducers) {    
    
      /* reducerKeys = ['counter', 'info']*/
      const reducerKeys = Object.keys(reducers)   //先得到reducers的所有键的集合
    
      /*返回合并后的新的reducer函数*/
      return function combination(state = { }, action) { 
        /*生成的新的state*/
        const nextState = { }
    
        /*遍历执行所有的reducers，整合成为一个新的state*/
        for (let i = 0; i < reducerKeys.length; i++) { 
          const key = reducerKeys[i]  
          const reducer = reducers[key]  //根据reducers键值对中的某个键得到其对应的value
          /*之前的 key 的 state*/
          const previousStateForKey = state[key]
          /*执行 分 reducer，获得新的state*/     //这里的reducer就类似于我们之前写的counterReducer函数或者InfoReducer函数
          const nextStateForKey = reducer(previousStateForKey, action)
          nextState[key] = nextStateForKey
        }
        return nextState;
      }
    }

### state 的拆分和合并 ###

上一小节，我们把 reducer 按组件维度拆分了，通过 combineReducers 合并了起来。但是还有个问题， state 我们还是写在一起的，这样会造成 state 树很庞大，不直观，很难维护。我们需要拆分，一个 state，一个 reducer 写一块。

这一小节比较简单，我就不卖关子了，用法大概是这样（注意注释）

/* counter 自己的 state 和 reducer 写在一起*/
    let initState = { 
      count: 0
    }
    function counterReducer(state, action) { 
      /*注意：如果 state 没有初始值，那就给他初始值！！*/  
      if (!state) { 
          state = initState;
      }
      switch (action.type) { 
        case 'INCREMENT':
          return { 
            count: state.count + 1
          }
        default:    
          return state;
      }
    }

我们修改下 createStore 函数，增加一行 `dispatch({ type: Symbol() })`

讲解：  
我们思考下这行可以带来什么效果？

1.  createStore 的时候，用一个不匹配任何 type 的 action，来触发 `state = reducer(state, action)`
2.  因为 action.type 不匹配，每个子 reducer 都会进到 default 项，返回自己初始化的 state，这样就获得了初始化的 state 树了。

到这里为止，我们已经实现了一个七七八八的 redux 啦！

## 中间件 middleware ##

中间件 middleware 是 redux 中最难理解的地方。但是我挑战一下用最通俗的语言来讲明白它。如果你看完这一小节，还没明白中间件是什么，不知道如何写一个中间件，那就是我的锅了！

中间件是对 dispatch 的扩展，或者说重写，增强 dispatch 的功能！

### 记录日志 ###

我现在有一个需求，在每次修改 state 的时候，记录下来 修改前的 state ，为什么修改了，以及修改后的 state。我们可以通过重写 store.dispatch 来实现，直接看代码

const store = createStore(reducer);
    const next = store.dispatch;
    
    /*重写了store.dispatch*/
    store.dispatch = (action) => { 
      console.log('this state', store.getState());
      console.log('action', action);
      next(action);
      console.log('next state', store.getState());
    }

我们来使用下

store.dispatch({ 
      type: 'INCREMENT'
    });

日志输出为

this state {  counter: {  count: 0 } }
    action {  type: 'INCREMENT' }
    1
    next state {  counter: {  count: 1 } }

现在我们已经实现了一个完美的记录 state 修改日志的功能！

### 记录异常 ###

我又有一个需求，需要记录每次数据出错的原因，我们扩展下 dispatch

这样每次 dispatch 出异常的时候，我们都会记录下来。

### 多中间件的合作 ###

我现在既需要记录日志，又需要记录异常，怎么办？当然很简单了，两个函数合起来呗！

store.dispatch = (action) => { 
      try { 
        console.log('this state', store.getState());
        console.log('action', action);
        next(action);
        console.log('next state', store.getState());
      } catch (err) { 
        console.error('错误报告: ', err)
      }
    }

如果又来一个需求怎么办？接着改 dispatch 函数？那再来10个需求呢？到时候 dispatch 函数肯定庞大混乱到无法维护了！这个方式不可取呀！

我们需要考虑如何实现扩展性很强的多中间件合作模式。

1.  我们把 loggerMiddleware 提取出来

1.  现在的代码有一个很严重的问题，就是 exceptionMiddleware 里面写死了 loggerMiddleware，我们需要让 `next(action)`变成动态的，随便哪个中间件都可以

const exceptionMiddleware = (next) => (action) => {   
      try { 
        /*把loggerMiddleware(action)变成 next(action)*/
        next(action);
      } catch (err) { 
        console.error('错误报告: ', err)
      } 
    }
    /*loggerMiddleware 变成参数传进去*/
    store.dispatch = exceptionMiddleware(loggerMiddleware);

3.同样的道理，loggerMiddleware 里面的 next 现在恒等于 store.dispatch，导致 loggerMiddleware 里面无法扩展别的中间件了！我们也把 next 写成动态的

const loggerMiddleware = (next) => (action) => { 
      console.log('this state', store.getState());
      console.log('action', action);
      next(action);
      console.log('next state', store.getState());
    }

到这里为止，我们已经探索出了一个扩展性很高的中间件合作模式！

这时候我们开开心心的新建了一个 `loggerMiddleware.js`，一个`exceptionMiddleware.js`文件，想把两个中间件独立到单独的文件中去。会碰到什么问题吗？

loggerMiddleware 中包含了外部变量 store，导致我们无法把中间件独立出去。那我们把 store 也作为一个参数传进去好了~

到这里为止，我们真正的实现了两个可以独立的中间件啦！

### 中间件使用方式优化 ###

上一节我们已经完全实现了正确的中间件！但是中间件的使用方式不是很友好

import loggerMiddleware from './middlewares/loggerMiddleware';
    import exceptionMiddleware from './middlewares/exceptionMiddleware';
    import timeMiddleware from './middlewares/timeMiddleware';
    
    ...
    
    const store = createStore(reducer);  //这里的reducer早在本文的前半部分就讲了
    const next = store.dispatch;
    
    const logger = loggerMiddleware(store);
    const exception = exceptionMiddleware(store);
    const time = timeMiddleware(store);
    store.dispatch = exception(time(logger(next)));

其实我们只需要知道三个中间件，剩下的细节都可以封装起来！我们通过扩展 createStore 来实现！

先来看看期望的用法

/*接收旧的 createStore，返回新的 createStore*/
    const newCreateStore = applyMiddleware(exceptionMiddleware, timeMiddleware, loggerMiddleware)(createStore);
    
    /*返回了一个 dispatch 被重写过的 store*/
    const store = newCreateStore(reducer);

实现 applyMiddleware （代码看不懂就算了）

### 让用户体验美好 ###

现在还有个小问题，我们有两种 createStore 了

/*没有中间件的 createStore*/
    import {  createStore } from './redux';
    const store = createStore(reducer, initState);
    
    /*有中间件的 createStore*/
    const rewriteCreateStoreFunc = applyMiddleware(exceptionMiddleware, timeMiddleware, loggerMiddleware);
    const newCreateStore = rewriteCreateStoreFunc(createStore);
    const store = newCreateStore(reducer, initState);

为了让用户用起来统一一些，我们可以很简单的使他们的使用方式一致，我们修改下 createStore 方法

const createStore = (reducer, initState, rewriteCreateStoreFunc) => { 
        /*如果有 rewriteCreateStoreFunc，那就采用新的 createStore */
        if(rewriteCreateStoreFunc){ 
           const newCreateStore =  rewriteCreateStoreFunc(createStore);
           return newCreateStore(reducer, initState);
        }
        /*否则按照正常的流程走*/
        ...
    }

最终的用法

const rewriteCreateStoreFunc = applyMiddleware(exceptionMiddleware, timeMiddleware, loggerMiddleware);
    
    const store = createStore(reducer, initState, rewriteCreateStoreFunc);

## 完整的 redux ##

### 退订 ###

不能退订的订阅都是耍流浪！我们修改下 store.subscribe 方法，增加退订功能

function subscribe(listener) { 
        listeners.push(listener);
        return function unsubscribe() {   //返回一个“退订”的函数
          const index = listeners.indexOf(listener)
          listeners.splice(index, 1)  //splice() 方法可删除从 index 处开始的零个或多个元素
        }
      }

使用

const unsubscribe = store.subscribe(() => { 
      let state = store.getState();
      console.log(state.counter.count);
    });
    /*退订*/
    unsubscribe();

## 总结 ##

到了最后，我想把 redux 中关键的名词列出来，你每个都知道是干啥的吗？

*  createStore  
    创建 store 对象，包含 getState, dispatch, subscribe, replaceReducer
 *  reducer  
    reducer 是一个计划函数，接收旧的 state 和 action，生成新的 state
 *  action  
    action 是一个对象，必须包含 type 字段
 *  dispatch  
    dispatch( action ) 触发 action，生成新的 state
 *  subscribe  
    实现订阅功能，每次触发 dispatch 的时候，会执行订阅函数
 *  combineReducers  
    多 reducer 合并成一个 reducer
 *  replaceReducer  
    替换 reducer 函数
 *  middleware  
    扩展 dispatch 函数！  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]  
    本文参考自;https://github.com/brickspert/blog/issues/22

[20190909160917824.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4fc2de2ac4184427be23007ce8f5221f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/29b48fb75812401eab012674b0b675f3.png