黄qiong

6 天前

Redux源码解析系列(五)-- bindActionCreator

本文作者:IMWeb 黄qiong 原文出处:IMWeb社区 未经同意,禁止转载

bindActionCreator 的作用其实就是用来将一个对象,它的value是action creators转成一个同样ke但是值变成将action creator包裹在dispatch里的函数。

也就是说,假设下面的actionCreator.js 我们import进来这个对象

export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

export function removeTodo(id) {
  return {
    type: 'REMOVE_TODO',
    id
  }
}

得到的对象为

{
   addTodo : text => 
    { 
      type: 'ADD_TODO',
      text
    },
   removeTodo : id => {
      type: 'REMOVE_TODO',
      id
    }
}

经过bindActionCreator就会变成

{
   addTodo : text => dispatch(addTodo('text'));
   removeTodo : id => dispatch(removeTodo('id'));
}

相当于会dispatch这个action。

bindActionCreator

参数:

1、actionCretors 可以是一个对象,也可以是一个单个函数

2、dispatch函数

返回: 单个函数,或者是一个对象。

传入一个function

如果只是传入一个function,返回的也是一个function

例如:

const toggleTodo = (id) => {
    return {
        type: 'TOGGLE_TODO',
        id
    };
};

export { toggleTodo };
let boundActionCreators = bindActionCreators(toggleTodo, dispatch);

//此时boundActionCreators  = (id) => dispatch(toggleTodo(id));

所以bindActionCreator实现比较简单,它的思路就是

1、判断传入第一个的参数是否是object,如果是函数,就直接返回一个包裹dispatch的函数

2、如果是object,就根据相应的key,生成包裹dispatch的函数即可

function bindActionCreator(actionCreator, dispatch) {
  return function() { return dispatch(actionCreator.bind(undefined, arguments))}
}
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 = {}
   keys.forEach((key) => {
     boundActionCreators[key] = bindActionCreator(actionCreators[key], dispatch)
   })
   return boundActionCreators
}

总结,bindActionCreator 的作用就是返回包裹dispatch的函数可以直接使用。

一般我们会用来mapDispatchToProps里。

0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。