Question

我一直在寻找connect()和mapDispatchToProps()

的文档

http://redux.js.org/?q=connect()

但我也发现我已经可以访问props.dispatch()以获取以下代码：

const app = document.getElementById('app');
const AppRedux = connect()(App);

ReactDOM.render(

  <Provider store={store}>
    <AppRedux></AppRedux>
  </Provider>

, app);

Answer 1

仅使用connect，您已经可以访问dispatch到this.props.dispatch（如您所述）。

然而，mapDispatchToProps所做的是通过道具自动绑定你的redux动作。例如：

import customAction from 'actions-directory-in-your-app'

const mapStateToProps = () => {} // no implementing anything for example purposes
const mapDispatchToProps = () => ({ customAction })

const AppRedux = connect(mapStateToProps, mapDispatchToProps)(App)

从现在起，customAction也会像dispatch一样成为道具。

Answer 2

connect的第二个参数接受一个对象，因此您可以使用ES6语法并避免使用mapDispatchToProps。

    import { yourAction } from './your_actions_folder'
    class Home extends Component{
        ....
        //For dispatch a action you only call the action Creator
        this.props.yourAction()
    }

     export default connect(mapStateToProps,{yourAction})(Home)

Answer 3

执行mapDispatchToProps的最简单，最有效的方法如下：

import * as myActions from './myActionsFile';
import {bindActionCreators} from 'redux';

...

 function mapDispatchToProps(dispatch) {
  return {
     actions: bindActionCreators(myActions , dispatch)
    };
  }

你的myActionsFile＆＃39;会有类似的东西：

export function loadSomeObject(object) {
 return {type: types.LOAD_SOME_OBJECT, object};
}

export function saveSomeObject(object) {
 return {type: types.SAVE_SOME_OBJECT, object};
}

Redux的bindActionCreator可以帮助您动态绑定您的动作。

- 我如何实现mapDispatchToProps（）

3 个答案: