读redux有感： redux原来是这样操作的。

Posted 2020-10-06 __记忆

2017.9.10日 教师节 ： ~当一个事物你没有接触，但是生活中 常常用到他，你就不得不去了解他了。

注：新手可以看一下，毕竟博主也是个菜鸟，没法写高深的东西，不想看博主扯淡的直接看第三节啦~~

1. 生活随笔

经过半年的不懈努力（找工作），终于再任职了两个创业公司后，进入到了一个D轮中大型公司。

在上半年，第一份工作做了三个月的nodejs前端（写node的前端），回学校后就不再去了。回杭州后第二份工作比较坑，老板小人，员工一波一波的离职，我也离职了快2个月，还没给我工作，这老板人无力吐槽，人做到这种地步真是够可以了，这第二份工作做得前端，ionic+angular，整个项目架构很乱。然后辞职后，到了目前这家公司。在这里，基本每天9点左右下班，有时加班到11点，电商公司，没办法。经常加班虽然这也不是什么大事，毕竟人多，技术好，得到了洗礼，还是感觉不错的。又是一年校招季，有人要来吗~~。

2. 前言

项目组里有一位前端同学负责的项目是react + redux 的，她基础不怎么好，更何况这redux不像vuex那样直观（个人感觉）。所以她经常问我些东西，一些错误，一些小算法之类的，还可以解决，对于并没有用过redux的我来说，从项目层面上来说，我对代码也是一脸懵逼，经常埋头看2小时也弄不好一个小功能。主要是弄不清楚原理。看文档不想看，工作后比较懒了，，，所以，这周末我就看了下redux的源码，发现了其中的工作流程。。。。

3. redux的基本原理

redux就是对一个仓库（store）的操作，我们可以布置好多仓位（state）（如： 水果、零食、糕点）等，他们每一个仓位（state）存储着不同的物品，每一个仓位都有一个操作系统（reducer）， 这个操作系统可以进行入库物品（ADD）、统计件数（COUNT）、筛选好（FILTER_GOOD）/坏（FILTER_BAD）等操作，这些操作都用一个统一的标签（type）来表示。好了比喻就到这里。

redux规定：

1. 用户每一次操作store都要触发一个action，这个action仅仅是告诉redux：1. 我要操作的类型type，2. 我提供的数据。触发条件dispatch({type: ... , data: ...});

function addTodo(content) {
  return {
    type: ADD_TODO,
    content: content
  }
}

dispatch(addTodo(‘你好啊‘))

如上代码，我们触发了一个行为ADD_TODO

2. 触发一个行为后，真正的state操作在reducer里完成，reducer里要做的事： 1. 任何情况都要返回一个state，2. 根据不同的type做不同的操作

function todoApp(state=[], action) {
  switch(action.type) {
    case ADD_TODO:
    return [
      ...state,
      {
        content: action.content,
        completed: false
      }
    ],
    case REMOVE_TODO:
    return [
        ...state.filter(item => item.id != action.id)
    ]
    default: 
    return state
  }
}    

差不多就像上面这样，定义了一个reducer函数，这个函数为两个行为做state处理，ADD_TODO、REMOVE_TODO。 该reducer函数接收两个参数，一个state是当前reducer对应的state，action是dispatch传递过来的行为对象。这个函数一定会返回一个新的state。差不多这个意思，不知道代码写错了没。

4. redux源码解析（看着源码看本节）

两个核心方法： combineReducers、createStore

4.1 Reducers 合并函数 combineReducers

用途： 将多个reducer合并成一个。

源码： 

1. 该函数接收一个参数reducers，reducers代表着要合并的所有reducer的键值对。

2. redux获取reducers所有键并遍历，过滤出键对应的值是function的项目，生成了最终的reducers对象finalReducers，以防非法reducer值入侵。

3. redux遍历finalReducers对象并检查，是否每一个函数每一次执行总会返回一个state，并做标记shapeAssertionError。

4. 检查完毕后，回一个闭包函数。该闭包函数就是总的reducer函数combination。

在未来的某个时间，这个combination函数会被执行：

1. 如果shapeAssertionError是真，意味着有错误，不执行逻辑。

2. 遍历finalReducers，拿到每个key值和reducers函数， 根据key值从state中拿到当前reducer下的当前状态previousStateForKey， 执行reducer函数并把previousStateForKey和action传入， 执行结果必定返回一个nextStateForKey，记住这个state。

 

3. 经过一次遍历后，每一个reducer函数都执行并返回了新的state。如果新的state和原来的state一致，返回原来的state，如果不一致，返回新的state。

4.2Store 创建函数createStore

用途： 创建store和工具方法

1. 该函数接收三个参数（只说前两个）： reducer（总的reducer函数，combineReducers函数生成的combination函数）, preloadedState（自定义的初始化state）

2. 将reducer函数保存在currentReducer变量，初始化一个currentState为preloadedState或者undefined，后续redux会根据currentState值用reducer函数来初始化state。

3.初始化currentListeners、nextListeners为空数组，这两个数组为观察者模式服务，存储监听函数。

4.定义一个subscribe函数用来订阅一个监听函数，同时返回一个闭包函数unsubscribe，当执行这个unsubscribe函数时，当前监听函数移除监听队列。

5.定义dispatch函数，最核心的函数，其工作非常简单，执行当前的reducer函数currentReducer，并把当前currentState和action传递过去。通过currentReducer函数我们可以获取到用户需要下一步得到的state，存储在currentState中为视图层所用。如果有监听函数，就遍历并执行他们。

6.getState函数返回当前state状态树。

5. 注意事项

1. 每一次dispatch都会遍历所有的reducer， 每一个reducer可以对同一行为做不同处理。dispatch要做什么事，只看type值！

2.每一个reducer函数必须有对state为undefined时的处理，因为redux创建store时会初始化一次store，此时store中还没有任何值。

3. reducer函数是个纯函数，只做数据的改变，不做请求、定时器之类的逻辑。

4. 一个store就是一个state的树状结构，你只能通过reducer来改变他的数据。

6. 总结

还有一些小函数没用过也没看，，，毕竟博主也是个懒熊，，，以上是看源码得到的结果。原理很简单，看一遍源码就知道了，不看的话还真一脸懵逼。。有些地方可能没理解透，有老司机可以指导一二，如有错误请指正。