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注入的道具，而不是使用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

Redux反應提供了redux的反應綁定。你不必爲了使用redux而使用它，但它爲你提供了所有綁定和優化。

不用手動

• 派遣你的行動
• 聽店裏
• 更新時的狀態保存修改

你只是你的組件與connect()連接到了Redux店你完成了。 connect()會給你一個組件，其中你需要的所有分派和狀態值都可以在組件的道具中訪問。

也談容器和presentationnal分量之差，這個環節是非常有用的http://redux.js.org/docs/basics/UsageWithReact.html#presentational-and-container-components

Answer 3

mapDispatchToProps用於將您的操作綁定到商店。通常行動創作者完全獨立於任何商店。這樣可以輕鬆測試這些操作。

在Redux中，您有一箇中央存儲在組件生命週期中初始化一次。react-redux提供了一種訪問此商店的所有組件需要訪問高級組件（connect）中的商店的方法。該商店有兩個主要功能：getState()和dispatch(action)。

• 保持應用狀態;
• 允許通過getState（）訪問狀態;
• 允許狀態通過調度（動作）更新;

Redux store documentation

react-redux的connect功能包的組件，並且噴射特性到組件。其中一些屬性始終插入，您不能像調度那樣選擇它們。該功能還接受兩個參數。其中之一是衆所周知的mapStateToProps。這是您的選擇器功能，用於決定您希望將組件內部的哪些部分作爲屬性接收到組件中。第二個參數可以是動作創建者的對象，也可以是接收調度函數的函數，也可以返回合併到組件屬性中的對象。這允許組件不知道Redux的概念，只是採取屬性。

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

我創建上codesandbox.io最小反應-終極版的例子。隨意使用不同版本的調用操作。

關於容器和組件的一點注意事項：在完全理解REDX正在做什麼之前，我不會擔心最佳實踐。無論如何，這個概念對Redux來說並不重要。