由于 mapDispatchToProps 函数，如何避免重新渲染连接的 React PureComponent？

Question

whenever mapDispatchToProps is called, it generates new functions to return. For example:

const mapDispatchToProps = function(dispatch, ownProps) {
  return {
    addToStack: (episodeId, stackId) => {
      return dispatch(StackAction.addEpisodeToStack(episodeId, stackId));
    },
  };
}

Every time the mapDispatchToProps is called, it will generate a new object, with a new arrow function.

In my application I often have to avoid re-rendering my components. Using a PureComponent is often the way to go. However, since the functions are always different, PureComponent won't help and I'd have to create a shouldComponentUpdate strategy. There, I'd have to "blacklist" all of the mapDispatchToProps functions and ignore all of them. I'd have to add every new function to the list so it'd avoid re-rendering.

here is an example of the blacklist shouldComponentUpdate boilerplate:

const blacklist = [
  'addToStack',
]

shouldComponentUpdate(nextProps, nextState) {
  for (let i in nextProps) {
    if (blacklist.includes(i)) continue;
    if (nextProps[i] !== this.props[i]) {
      return true;
    }
  }
  for (let i in nextState) {
    if (nextState[i] !== this.state[i]) {
      return true;
    }
  }
  return false;
}

I've come up with a new solution

const dispatch;
const mapDispatchToPropsFunctions = {
  addToStack: (episodeId, stackId) => {
    return dispatch(StackAction.addEpisodeToStack(episodeId, stackId));
  },
};

const mapDispatchToProps = function(dispatchArg, ownProps) {
  dispatch = dispatchArg
  return mapDispatchToPropsFunctions;
}

this way the functions are constant and won't trigger a re-rendering of a PureComponent and I don't have to maintain a shouldComponentUpdate function.

however this seems wrong to me. Is there a "default" way of dealing with this problem?

Answer 1

I generally advise to not try to recreate functions that capture props values like that, but instead have a handler method on your class that passes prop values to the action creator. I also advise that people not write mapDispatch functions directly, but use the "object shorthand" for connect() .

Example:

const actions = {addToStack : StackAction.addEpisodeToStack};

class MyComponent extends React.Component {
    addToStack = () => {
        this.props.addToStack(this.props.episodeId, this.props.stackId);
    }
}

In your specific snippet, it looks like you're not even referencing any props values in mapDispatch anyway, so there was no need to declare the ownProps parameter. ( connect will only call a mapDispatch function multiple times if the ownProps parameter is requested. Otherwise, it only calls mapDispatch once, when the component is created.)

Answer 2

Turns out that the actual solution is to not use mapDispatchToProps at all. In the react-redux docs there is a reference to a shorthand method:

If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component's props.

So the solution is to, instead of providing a function that binds dispatch to your action creators, just provide to connect an object containing your action creators as second argument. Connect will only bind them once and use the same functions all the time, avoiding unnecessary re-renders.

This should be in fact the preferred way of supplying action creators to connect.