使用 mapDispatchToProps 和 this.props.dispatch() 有什么区别

Question

谁能提供 - mapDispatchToProps 和 this.props.dispatch()

之间的区别

• 什么时候用哪个？
• 这与ReduxThunk
有关吗

我在下面的代码中使用了 this.props.dispatch

    /*Action-Navigation*/
/*Navigation Action*/

const init = () => {
    return (dispatch) => {
        dispatch ({
            type : 'NAV_LINKS',
            data : ['Home', 'Summary']    
        })
    }
}

/*Component-Navigation*/
class Navigation extends React.Component {
    constructor(props){
        super(props);
        this.state = {
    };
    }
  componentWillMount() {
    this.props.dispatch(init());   
  }
  componentWillReceiveProps(props){
    console.log(props);
  }
  render() {
    return (
      <div className="navigation-wrap">
        <div className="navigation-header">
          Navigation
        </div>
        {this.props.navigationReducer.navigationLinks.map((links, index) => <div key={index}>{links}</div>)}
      </div>
    )
  }
}

const mapStateToProps = (state={}) => {
    return {
        navigationReducer : state.navigationReducer,
        navigationLinks : state.navigationReducer.navigationLinks
    }
}


let NavigationContainer = ReactRedux.connect(mapStateToProps)(Navigation);


/*Reducer-Navigation*/
/*Navigation Reducer*/

let initialState = {}; 
const navigationReducer = (state=initialState, action) => {
    switch(action.type){
        case 'NAV_LINKS':
            return Object.assign(state, {
                navigationLinks : action.data
            })
        default:
            return state
    }
}

/*Reducer-Index*/
/*combine all reducers*/

const reducers = Redux.combineReducers({
    navigationReducer
});

/*App*/
/*Create a store*/
const store = Redux.createStore(
    reducers,
    Redux.applyMiddleware(ReduxThunk.default)
);

/*Render component to DOM*/
const render = () => {
    ReactDOM.render(
        <ReactRedux.Provider store={store}>
            <NavigationContainer />
        </ReactRedux.Provider>,
        document.getElementById('rootApp')
    );
}

render();

Answer 1

使用 redux connect 时，mapDispatchToProps 使 dispatch 方法可用于您的道具。这就是为什么您可以在组件中执行 this.props.dispatch()。