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

Question

在学习 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>
    );
  }
}

Answer 1

您可以使用 dispatch 而不传递 mapDispatchToProps，也可以使用 mapDispatchToProps 注入(inject)的 props，而不使用 dispatch 。这就是为什么这样调用 mapDispatchToProps ——它允许您基于 dispatch 定义一些其他 props，这样您就不需要再次使用它。

这是一个使用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 帮助器时，您的操作将绑定(bind)到 props。因此，您可以使用 this.props.yourAction 调用它。

另一种方法是将操作直接分派(dispatch)到商店。你可以这样做。

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

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

开发环境的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以及。希望这可以帮助。快乐编码!