Comment utiliser réagir-redux se connecter avec mapStateToProps,MapDispatchToProps et redux-routeur

Que je veux utiliser mon conteneur "LoginPage" (smart-composant) de redirection après la connexion.
Quelque chose comme ceci:

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

nom d'utilisateur et pass est arrivé de la muette-composant.

Composant intelligent connecter

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

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

Comment je peux ajouter pushState de redux-routeur ? Ou je suis sur la mauvaise voie?

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
  • Je suis coincé dans un problème similaire. Quelles sont LoginActions ici?
  • pourquoi ce besoin d'être fait dans le composant lui-même? Juste curieux.
InformationsquelleAutor Max P | 2015-12-24
  1. 28
    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);
    • L'important ici était de se rendre compte que, dans mapStateToProps, "état" n'est pas seulement le local de l'état de l'objet, mais le seul état de la redux application. Je pense que la tendance est de penser que vous pouvez simplement utiliser return { utilisateur: l'état.l'utilisateur }, car les plus susceptibles { utilisateur } est-ce que vous avez en local pour que la composante en actions, réducteurs, etc.
    • Merci!!!! C'est sous-estimée dans le redux de la documentation, j'ai été confus au sujet de la même chose. Certes, j'probablement écrémé trop vite XD
    InformationsquelleAutor Max P
  2. 1

    Simple squelette : 

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