Redux source code interpretation — bindactioncreators source code analysis

Time:2021-5-6

Source code analysis of bindactioncreators

bindActionCreatorsyesreduxProvides an auxiliary method that allows us to call in the form of a methodaction. At the same time, automaticallydispatchCorrespondingaction. This module code is very simple, as long as you understandFunction.prototype.applyYou can clearly understand every line of code in this module by using. Because, this module is designed to a little less content, so we directly analyze the source code.

function bindActionCreator(actionCreator, dispatch) {
  //The main function of this function is to return a function. When we call the returned function, we will automatically dispatch the corresponding action
  //In fact, this piece can be changed to the following form, which is better
  // return function(...args) {return dispatch(actionCreator.apply(this, args))}
  return function() { return dispatch(actionCreator.apply(this, arguments)) }
}
/**
    Parameter Description: 
        Actioncreators: the action create function can be a single function or an object. All elements of this object are action create functions
        Dispatch: store.dispatch method
*/
export default function bindActionCreators(actionCreators, dispatch) {
  //If actioncreators is a function, the bindactioncreator method is called to bind the action create function and dispatch
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }
  //Actioncreators must be one of the functions or objects and cannot be null
  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"?`
    )
  }

  //Get the names of all action create functions
  const keys = Object.keys(actionCreators)
  //Save the collection after the dispatch and action create functions are bound
  const boundActionCreators = {}
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    const actionCreator = actionCreators[key]
    //The exclusion value is not the action create of the function
    if (typeof actionCreator === 'function') {
      //Binding
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  //Returns the bound object
  /**
      The basic form of boundactioncreators is
      {
      actionCreator: function() {dispatch(actionCreator.apply(this, arguments))}
      }
  */
  return boundActionCreators
}

That’s rightbindActionCreatorsAn overall interpretation of the source code, the level is limited, welcome to brick. The following source code interpretation and test examples can focus on:Redux source code interpretation warehouse

Recommended Today

Looking for frustration 1.0

I believe you have a basic understanding of trust in yesterday’s article. Today we will give a complete introduction to trust. Why choose rust It’s a language that gives everyone the ability to build reliable and efficient software. You can’t write unsafe code here (unsafe block is not in the scope of discussion). Most of […]