Wie benutze react-redux connect mit mapStateToProps, MapDispatchToProps und redux-router

Question

Ich möchte in meinem Container "LoginPage" (Smart-Komponente) Umleitung nach dem Login verwenden. Etwas wie folgt aus:

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

Benutzernamen und von Dumb-Komponente angekommen passieren.

Smart-Komponente verbinden

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

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

Wie ich pushstate von redux-Router hinzufügen können? Oder ich bin auf dem falschen Weg?

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

Einfach Skelett:

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'));