mapDispatchToProps与store.dispatch()

kel*_*nic 6 javascript reactjs redux react-redux

mapDispatchToProps在组件内部使用调用操作是否更有效,或者使用store.dispatch内部操作创建者更有效?

mapDispatchToProps 例:

// Component

import React from 'React';
import { connect } from 'react-redux';
import { defaultAction } from './actions';

class MyComponent extends Component {
  onClickHandler() {
    this.props.dispatch(defaultAction());
  }

  render() {
    return (<div onClick={this.onClickHandler.bind(this)} />);
  }
}

function mapDispatchToProps(dispatch) {
  return { dispatch };
}

export default connect(mapDispatchToProps)(MyComponent);



// Actions

import { DEFAULT_ACTION } from './constants';

export function defaultAction() {
  return {
    type: DEFAULT_ACTION,
  };
}
Run Code Online (Sandbox Code Playgroud)

store.dispatch() 例:

// Component

import React from 'React';
import { connect } from 'react-redux';
import { defaultAction } from './actions';

class MyComponent extends Component {
  onClickHandler() {
    defaultAction();
  }

  render() {
    return (<div onClick={this.onClickHandler.bind(this)} />);
  }
}

export default MyComponent;


// Actions

import { DEFAULT_ACTION } from './constants';
import store from './store';

export function defaultAction() {
  store.dispatch({
    type: DEFAULT_ACTION,
  });
}
Run Code Online (Sandbox Code Playgroud)

我的猜测是使用它mapDispatchToProps而不是将整个导入./store到调度操作更有效.

Jim*_*lla 5

通常建议使用dispatch通过 提供给您的方法mapDispatchToProps,而不是将您的动作创建者方法与您的商店单例相结合。这里有一些关于它的深入讨论。