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注入的道具，而不是dispatch。这就是mapDispatchToProps以这种方式调用的原因 - 它允许您基于dispatch定义其他一些道具，因此您无需再次使用它。

以下是使用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帮助程序时，您的操作将绑定到道具。因此，您可以使用this.props.yourAction调用它。

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

    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。希望这可以帮助。快乐的编码！

Answer 2

react-redux为redux提供反应结合。您不必使用它来使用redux，但它会为您提供所有绑定和优化。

而不是手动

发送您的行动
听商店
更新商店更改时的状态

您只需使用connect()将组件连接到redux商店即可。 connect()将为您提供一个组件，您可以在组件的道具中访问所需的所有调度和状态值。

Answer 3

react-redux用于将您的操作绑定到商店。通常，动作创作者与任何商店完全独立。通过这种方式，可以轻松测试操作。

在Redux中，您有一个在组件生命周期中初始化一次的中央存储。 connect提供了一种在需要以更高阶组件（getState()）访问存储的所有组件中访问此存储的方法。该商店有两个主要功能：dispatch(action)和react-redux。

保持申请状态;

允许通过getState（）;
访问状态
允许通过dispatch（action）;
更新状态

Redux store documentation

connect＆＃39; s mapStateToProps函数包装组件并将属性注入组件。其中一些属性总是被插入，你不能像调度一样选择它们。该函数还接受两个参数。其中一个是众所周知的$(function () { $(groups).change(function () { var group = $('option:selected', $(this)).val(); if ($(group).val()==”-1”){// -1 selected} else {//blah} }); });。这是您的选择器功能，用于决定要在组件内部接收的商店的哪些部分作为属性。第二个参数可以是动作创建者的对象，也可以是接收调度函数的函数，还可以返回合并到组件属性中的对象。这允许组件不了解Redux的概念，只需要获取属性。

Redux documentation with React和connect documentation in react-redux repository

我在codesandbox.io上创建了一个最小的react-redux示例。随意使用不同版本的呼叫操作。

关于容器和组件的一个注释：在完全理解redux正在做什么之前，我不会担心最佳实践。无论如何，这个概念对Redux来说也不重要。

mapDispatchToProps并直接调用组件中的dispatch函数

3 个答案: