Redux源码分析之bindActionCreators

  1. 云栖社区>
  2. 博客>
  3. 正文

Redux源码分析之bindActionCreators

淡色的云 2017-08-03 13:35:00 浏览573
展开阅读全文

 Redux源码分析之基本概念 

Redux源码分析之createStore 

Redux源码分析之bindActionCreators 

Redux源码分析之combineReducers

Redux源码分析之compose

Redux源码分析之applyMiddleware 

bindActionCreators:对disptach的一种封装,可以直接执行或者通过属性方法的调用隐式的调用dispatch,而不用显式调用dispacth

现在我们修改一下代码,引入 acion creater 和 bindActionCreaters,一起来看一下使用效果上有什么不同,重点看红色部分。

let { createStore, bindActionCreators } = self.Redux

//默认state
let todoList = []
// reducer
let todoReducer = function (state = todoList, action) {
    switch (action.type) {
        case 'add':
            return [...state, action.todo]
        case 'delete':
            return state.filter(todo => todo.id !== action.id)
        default:
            return state
    }
}

//创建store
let store = createStore(todoReducer)

//订阅
function subscribe1Fn() {
    // 输出state
    console.log(store.getState())
}
store.subscribe(subscribe1Fn)

// action creater
let actionCreaters = {
    add: function (todo) { //添加
        return {
            type: 'add',
            todo
        }
    }, delete: function (id) {
        return {
            type: 'delete',
            id
        }
    }
}

let boundActions = bindActionCreators(actionCreaters, store.dispatch)
boundActions.add({
    id: 12,
    content: '睡觉觉'
})

let boundAdd = bindActionCreators(actionCreaters.add, store.dispatch)
boundAdd({
    id: 13,
    content: '陪媳妇'
})

 

输出结果:

从上面分析 bindActionCreators,两种调用方式,都是对调用的一种封装,不用每次都 dispatch。

  第一

  • bindActionCreators 传入action creater和 dispatch方法
  •   返回一个函数,直接调用就会更新数据,不用显式调用dispatch

     第二

  • bindActionCreators 传入一个对象(属性都是action creater)和 dispatch方法
  • 返回一个对象,直接可以调用属性方法,就会更新数据

 我们来看看bindActionCreators.js 源码,

 

function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

export default function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }

  if (typeof actionCreators !== 'object' || actionCreators === null) {
    throw new Error(
      `bindActionCreators expected an object or a function, instead received ${actionCreators === null ? 'null' : typeof actionCreators}. ` +
      `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
    )
  }

  const keys = Object.keys(actionCreators)
  const boundActionCreators = {}
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    const actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

 

 

 

bindActionCreators.js 里面有一个 bindActionCreator,bindActionCreators 方法,

bindActionCreators会根据传入的是函数还是对象,采取不同的处理方式,

  • 入参是函数,返回函数,
  • 传入对象,返回对象。

所以重点反而是 bindActionCreator 方法,我们来分解一下bindActionCreator,

  • 返回的是一个函数
  • ...args是动态参数,(rest 参数)
  • actionCreator(...args) 返回一个对象,拿add方法来说,等同于 add(..args)

  那我们来看看  let boundAdd = bindActionCreators(actionCreaters.add, store.dispatch),这个方法返回等同如下 ,那么就简单了,执行boundAdd 就是dispach action

let boundAdd = function(){
     dispatch(actionCreators.add(...arguments))
}

 

参考:

Redux从设计到源码

Redux系列x:源码分析 

redux源码解析-redux的架构 - chenby - 博客园

解 redux 源码-知乎

Redux-source-analyze

深入到源码:解读 redux 的设计思路与用法

深入理解redux中间件

 

网友评论

登录后评论
0/500
评论
淡色的云
+ 关注