Reak-redux, mapStateToProps, MapDispatchToProps ve redux-router ile nasıl bağlanır

Question

Oturum açtıktan sonra kapsayıcıda "LoginPage" (akıllı bileşen) yönlendirmesini kullanmak istiyorum. Böyle şey:

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

kullanıcı adı ve dilsiz-bileşeninden geldi geçiren.

Akıllı bileşen ben redux-yönlendiricinizden pushState ekleyebilir nasıl

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

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

bağlamak? Yoksa yanlış yolda mıyım?

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

Basit iskelet:

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