Cách sử dụng phản ứng-redux kết nối với mapStateToProps, MapDispatchToProps và redux-router

Question

Tôi muốn sử dụng trong chuyển hướng "LoginPage" vùng chứa (thành phần thông minh) của tôi sau khi đăng nhập. Một cái gì đó như thế này:

handleSubmit(username, pass, nextPath) { 
    function redirect() { 
     this.props.pushState(null, nextPath); 
    } 
    this.props.login(username, pass, redirect); //action from LoginAcitons 
    } 

tên người dùng và vượt qua đến từ thành phần câm.

thành phần thông minh kết nối

function mapStateToProps(state) { 
    return { 
    user: state.app.user 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators(LoginActions, dispatch) 
} 

Làm thế nào tôi có thể thêm pushState từ Redux-router? Hay tôi đang đi sai đường?

export default connect(mapStateToProps, {pushState})(LoginPage); //works, but haven't actions 

export default connect(mapStateToProps, mapDispatchToProps)(LoginPage); //works, but haven't pushState 

export default connect(mapStateToProps, mapDispatchToProps, {pushState})(LoginPage); //Uncaught TypeError: finalMergeProps is not a function 

Answer 1

function mapStateToProps(state) { 
    return { 
    user: state.app.user 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(LoginActions, dispatch), 
    routerActions: bindActionCreators({pushState}, dispatch) 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(LoginPage); 

Answer 2

Simple xương:

import React from 'react'; 
import ReactDOM from 'react-dom' 
import { createStore,applyMiddleware, combineReducers } from 'redux' 
import { connect, Provider } from 'react-redux' 
import thunk from 'redux-thunk' 
import logger from 'redux-logger' 

import View from './view'; 
import {playListReducer, artistReducers} from './reducers' 


/*create rootReducer*/ 


const rootReducer = combineReducers({ 
    playlist: playListReducer, 
    artist: artistReducers 
}) 

/* create store */ 
let store = createStore(rootReducer,applyMiddleware(logger ,thunk)); 


/* connect view and store */ 
const App = connect(
    state => ({ 
    //same key as combineReducers 
    playlist:state.playlist, 
    artist:state.artist 
    }), 
    dispatch => ({ 

    }) 
)(View); 



ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider> , 
    document.getElementById('wrapper'));