Reaction redux - update Objektstatus mit neuen Wert

Question

Ich verwende Redux zum ersten Mal, und ich bin nicht erfolgreich, einen Zustand zu aktualisieren. Hier ist der Workflow: Benutzer angemeldet in der App (/login), ein Token wird in sessionStorage gespeichert, und ich schicke Benutzerinformationen für den Zugriff auf Benutzerdaten auf der /dashboard/:id Seite.

Gerade jetzt, wenn ich Requisiten auf dem Armaturenbrett Komponenten console.log, hier ist das Ergebnis:

userData : {} 

So das Objekt Userdata ist noch leer. Hier ist der Code:

Loginform:

import React, { Component } from 'react'; 
import { Link } from 'react-router-dom'; 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 
import * as authActions from '../../actions/authActions'; 


class LoginForm extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      email: '', 
      password: '', 
      errors: {}, 
      isLoading: false, 
     }; 
    } 

    onChange(e) { 
     this.setState({ 
      [e.target.name]: e.target.value 
     }) 
    } 

    onSubmit(e) { 
     e.preventDefault(); 
     this.setState({ errors: {}, isLoading: true }); 
     this.props.actions.logInUser({ data: { user: { email: this.state.email, password: this.state.password }}}) 
    } 

    render() { 
     return(
      <div> 
       <form onSubmit={this.onSubmit.bind(this)}> 
        <div className="field"> 
         <label className="label"> Email </label> 
         <div className="control"> 
          <input type="email" 
            name="email" 
            value={this.state.email} 
            onChange={this.onChange.bind(this)} 
            className="input" /> 
         </div> 
        </div> 
        <div className="field"> 
         <label className="label"> Mot de passe </label> 
         <div className="control"> 
         <input type="password" 
           ref="password" 
           name="password" 
           value={this.state.password} 
           onChange={this.onChange.bind(this)} 
           className="input" /> 
         </div> 
        </div> 
        <div className="form-group"> 
         <input type="submit" value="Signup" className="button is-primary" /> 
        </div> 
        <Link to={{ pathname: '/register' }}>Inscription</Link> 
       </form> 
      </div> 
     ); 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators(authActions, dispatch) 
    }; 
} 

export default connect(null, mapDispatchToProps)(LoginForm); 

Die authAction:

import { browserHistory } from 'react-router'; 
import * as types from './types'; 
import sessionApi from '../api/SessionApi'; 

export function loginSuccess(userData) { 
    return { 
     type: types.LOG_IN_SUCCESS, 
     payload: userData 
    } 
} 

export function loginFailed() { 
    return { 
     type: types.LOG_IN_FAILED 
    } 
} 

export function logInUser(credentials) { 
    return function(dispatch) { 
     return sessionApi.login(credentials) 
      .then(response => { 
       console.log(response); 
       if(response.data) { 
        sessionStorage.setItem('jwt', response.data.authentication_token); 
        dispatch(loginSuccess(response.data)); 
        browserHistory.push('/dashboard/' + response.data.id); 
       } else { 
        dispatch(loginFailed()); 
       } 
      }) 
      .catch(error => { 
       throw(error); 
      }) 
    } 
} 

Die API:

import axios from 'axios'; 

class SessionApi { 
    static login(credentials) { 
     return axios.post('<link_hidden>', credentials) 
     .then(response => { 
      console.log(response); 
      return response; 
     }) 
     .catch(error => { 
      return error; 
     });    
    } 
} 

export default SessionApi; 

Die Sitzung Minderer (Ich habe einen rootReducer für combineReducer) :

und die initial Datei:

export default { 
    session: !!sessionStorage.jwt, 
    userData: {} 
} 

Kennt jemand, warum das Userdata-Objekt immer noch leer ist? In der Sitzung Minderer passiere ich die Userdata so verstehe ich nicht ..

EDIT

dashboard.js 

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

class Dashboard extends Component { 
    constructor(props) { 
     super(props); 
     console.log(props); 
    } 

    render() { 
     return(
      <div> 
       <h1> Hello user </h1> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    const userData = state.sessionReducer.userData; 
    return { userData }; 
} 

export default connect(mapStateToProps)(Dashboard); 

Answer 1

Ihr Code gut zu mir scheint. Können Sie Ihren Router überprüfen, wenn er korrekt funktioniert?