在了解React-Redux时,我偶然发现了以下代码,我不确定以下两行之间有什么区别并使用mapDispatchToProps? let { dispatch, actions } = this.props; dispatch(actions.createTodo({ todo })); 有人可以告诉我使用上面
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.希望这可以帮助.快乐的编码!