reactjs – mapDispatchToProps并直接调用组件中的调度函数

在了解React-Redux时,我偶然发现了以下代码,我不确定以下两行之间有什么区别并使用mapDispatchToProps？

let { dispatch, actions } = this.props;
    dispatch(actions.createTodo({ todo }));

有人可以告诉我使用上面两行和使用mapDispatchToProps的区别吗？以上两行也可用于组件,容器或仅用于组件中吗？谢谢

import React from 'react';
import ReactDOM from 'react-dom';

export default class TodoForm extends React.Component {
  createTodo(e) {
    e.preventDefault();

    let input = ReactDOM.findDOMNode(this.input);
    let todo = input.value;

    // ????
    let { dispatch, actions } = this.props;
    dispatch(actions.createTodo({ todo }));

    input.value = '';
  }

  render() {
    return (
      <div>
        <Form horizontal onSubmit={::this.createTodo}>

        </Form>
      </div>
    );
  }
}

您可以使用dispatch而不是传递mapDispatchToProps,也可以使用mapDispatchToProps注入的props,而不是使用dispatch.这就是为什么mapDispatchToProps以这种方式调用的原因 – 它允许您基于调度定义一些其他道具,因此您不需要再次使用它.

这是一个使用mapDispatchToProps方法的示例.您可以找到代码here.

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { toggleQuestionModal, toggleConfirmation } from '../actions/questionActions';
import QuestionModal from '../components/questionModal';

class QuestionPage extends Component {
    constructor(props, context) {
        super(props, context);
        this.openModal = this.openModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
        this.afterOpenModal = this.afterOpenModal.bind(this);
    }


    openModal() {
        this.props.toggleQuestionModal(true);
    }

    afterOpenModal() {
        // references are now sync'd and can be accessed. 
        // this.subtitle.style.color = '#f00';
    }

    closeModal() {
        this.props.toggleConfirmation(true);
    }

    render() {
        const { modalIsOpen } = this.props;
        return (
            <div>
                <QuestionModal modalIsOpen={modalIsOpen} openModal={this.openModal} closeModal={this.closeModal} 
                afterOpenModal={this.afterOpenModal} />
            </div>
        );
    }
}

QuestionPage.propTypes = {
    modalIsOpen: PropTypes.bool.isRequired,
    toggleQuestionModal: PropTypes.func.isRequired,
    toggleConfirmation: PropTypes.func.isRequired
};

function mapStateToProps(state, ownProps) {
    return {
        modalIsOpen: state.question.modalIsOpen
    };
}

function mapDispatchToProps(dispatch) {
    return {
        toggleQuestionModal: bindActionCreators(toggleQuestionModal, dispatch),
        toggleConfirmation: bindActionCreators(toggleConfirmation, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(QuestionPage);

这是推荐的方法.将mapDispatchToProps传递给connect帮助程序时,您的操作将绑定到props.因此,您可以使用this.props.yourAction调用它.

另一种方法是将操作直接发送到商店.你可以这样做.

import {loadCourses} from './actions/courseActions';
    import configureStore from './store/configureStore';

    const store = configureStore();
    store.dispatch(loadCourses());

dev环境的configureStore文件就是这样的.

import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers';
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
import thunk from 'redux-thunk';

export default function configureStore(initialState) {
  return createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk, reduxImmutableStateInvariant())
  );
}

另请注意,我在这里使用的是redux-thunk中间件.除了上面的解释,我还建议你通过这个discussion.希望这可以帮助.快乐的编码！