redux源码学习笔记 - combineReducers

2019-04-21 19:41:28 阅读：308 来源： 互联网

标签：const 函数 combineReducers reducer state 源码 key redux reducers

上一篇有了解到，reducer函数的两个为：当前state和此次dispatch的action。

state的结构是JavaScript对象，每个key都可以代表着不同意义的数据。比如说

    {
        lists:object,
        type:string
    }

lists管理列表数据，type管理选中的类型。此时就需要考虑将state分为不同的子树，每次子树数据对应一个reducer子函数，单独管理对应的state。但是createStore(reducer,preloadedState)函数接收的reducer必须为单一个函数。这个时候就需要用到combinReducers函数，它的作用是把多个reducer函数合并成一个最终的reducer函数。

combineReducers(reducers)

看一下combineReducers函数实现的核心代码，以下代码删掉了异常提示和处理部分，只保留了关键部分。

export default function combineReducers(reducers) {
  //过滤掉参数中，value不是function的
  const reducerKeys = Object.keys(reducers)
  const finalReducers = {}
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i]

    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key]
    }
  }
  // 处理后的reducers对象的所有key值
  const finalReducerKeys = Object.keys(finalReducers)

  // 返回合并后的reducer函数，她接收的参数和普通的reducer函数一致。
  // 这里的state是完整的数据结构，而单一的reducer函数接收的只是它管理的那个子树
  return function combination(state = {}, action) {

    let hasChanged = false
    const nextState = {}
    // 有action分派时，对所有的子reducer都触发
    // 因为action有type字段，所以还是会触发到对应的之reducer函数
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i]
      const reducer = finalReducers[key]
      // 对应的子树数据
      const previousStateForKey = state[key]
      // 调用对应的reduer函数，返回子树数据的更新结果
      const nextStateForKey = reducer(previousStateForKey, action)
      
      // 子树数据同步到state中
      nextState[key] = nextStateForKey
      // 标记数据是否发生变化，只要有一个子树改变了就算数据已改变
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    // 返回state数据
    return hasChanged ? nextState : state
  }
}

combineReducers接收的reducers是value为子reducer函数的对象。对象的key值可以和函数名一致，也可以不同。返回的state的key值和reducers对象的key值是保持一致的。

所以当createStore(reducer,preloadedState)中的reducer函数是combineReducers合并成的，传入初始状态时，要注意state的keys要和reducers一致。

可见combineReducers主要的功能，就是把action传入到所有的子reducer函数遍历一次，同时处理state的切片和合并。

当然这里少了很多异常校验部分的代码，有兴趣可以查阅详细源码。

实例

/* reducer */
import {combineReducers} from 'redux';
import testAsync from './testasync';
import todoList from './todolist';

const reducer = combineReducers({
    testAsync,
    todoList
});

export default reducer;

/* store */
import {createStore} from 'redux';
import reducer from './reducer/index';

let store = createStore(reducer)

{testAsync,todoList}即是reducer函数对象，key和函数名一样。{a:testAsync,b:todoList}写成这样也可以。

state的获取，更新和单一的reducer函数一样，上一篇已做过介绍。

标签：const,函数,combineReducers,reducer,state,源码,key,redux,reducers
来源： https://www.cnblogs.com/shapeY/p/10746371.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

redux源码学习笔记 - combineReducers

combineReducers(reducers)

实例