javascript - para - redux react español

Cómo utilizar reaccion-redux con mapStateToProps, MapDispatchToProps y redux-router

Question

Quiero usar en mi contenedor "LoginPage" (componente inteligente) redirigido después de iniciar sesión. Algo como esto:

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

El nombre de usuario y el pase llegaron del componente tonto.

Componente inteligente conectar

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

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

¿Cómo puedo agregar pushState desde redux-router? O estoy en el camino equivocado?

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

Esqueleto simple:

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

Answer 2

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