React, Redux und Authentication - Status nicht finden

Question

Ich versuche redux-auth-wrapper in die react boilerplate zu integrieren.

Nach meinen Debugging-Tools hat der Browser den Status richtig eingestellt (Benutzer: {Daten: null, isLoading: false}), aber die App sagt, dass der Zustand nicht definiert ist.

mapStateToProps scheint den Status korrekt angegeben zu haben?

Reducer:

Behälter/App/reducer.js:

import { fromJS } from 'immutable'; 

import { 
    USER_LOGGING_IN, 
    USER_LOGGED_IN, 
    USER_LOGGED_OUT, 
} from '../../constants'; 

const userInitialState = fromJS({ 
    data: null, 
    isLoading: false, 
}); 

function userReducer(state = userInitialState, action) { 
    switch (action.type) { 
     case USER_LOGGING_IN: 
      return state 
       .set('isLoading', true); 
     case USER_LOGGED_IN: 
      return state 
       .set('data', action.payload) 
       .set('isLoading', false); 
     case USER_LOGGED_OUT: 
      return userInitialState; 
     default: 
      return state; 
    } 
} 

export default userReducer; 

Behälter/App/index.js

import React from 'react'; 
import { Route, NavLink } from 'react-router-dom'; 
import { connect } from 'react-redux'; 
import { logout } from '../../actions/user'; 

import Home from '../../components/Home'; 

const getUserName = (user) => { 
    if (user.data) { 
    return `Welcome ${user.data.name}`; 
    } 
    return ('Not logged in'); 
}; 


const UserName = ({ user }) => (<div>{getUserName(user)}</div>) 

function App({ user, logout }) { 
    return (
    <div> 
     <h1>Test App</h1> 
     <div> 
     <nav> 
      <NavLink exact to="/">Home</NavLink> 
     </nav> 
     <nav> 
     </nav> 
     <div> 
      <Route exact path="/" component={Home} /> 
     </div> 
     </div> 
    </div> 
); 
} 

const mapStateToProps = (state) => ({ 
    user: state.user, -- this is undefined when it should not be 
}); 

export default connect(mapStateToProps, { logout })(App); 

reducers.js:

/** 
* Combine all reducers in this file and export the combined reducers. 
*/ 

import { fromJS } from 'immutable'; 
import { combineReducers } from 'redux-immutable'; 
import { LOCATION_CHANGE } from 'react-router-redux'; 

import languageProviderReducer from 'containers/LanguageProvider/reducer'; 
import userReducer from 'containers/App/reducer'; 

/* 
* routeReducer 
* 
* The reducer merges route location changes into our immutable state. 
* The change is necessitated by moving to react-router-redux@5 
* 
*/ 

// Initial routing state 
const routeInitialState = fromJS({ 
    location: null, 
}); 

/** 
* Merge route into the global application state 
*/ 
function routeReducer(state = routeInitialState, action) { 
    switch (action.type) { 
    /* istanbul ignore next */ 
    case LOCATION_CHANGE: 
     return state.merge({ 
     location: action.payload, 
     }); 
    default: 
     return state; 
    } 
} 

/** 
* Creates the main reducer with the dynamically injected ones 
*/ 
export default function createReducer(injectedReducers) { 
    return combineReducers({ 
    route: routeReducer, 
    language: languageProviderReducer, 
     user: userReducer, 
    ...injectedReducers, 
    }); 
} 

Dies ist die vorformulierten nur reagieren, sondern vermischt mit dem Router 4 Beispiel reagieren (auth.js, constants.js, App/reducer.js, App/index.js etc)

Answer 1

Status ist ein immutable Objekt. Verwenden Sie .toJS(), um es als einfaches javacsript-Objekt zu verwenden.

const mapStateToProps = (immutableState) => { 
    const state = immutableState.toJS(); 
    return { 
    user: state.user, 
    --this should work correctly now 
    }; 
}; 

Lassen Sie mich wissen, ob dies gelöst wird.

Answer 2

const userInitialState = fromJS({ 
    data: null, 
    isLoading: false, 
}); 

wäre dies nicht zurückgeben state.data und state.isLoading?

Ich sehe nirgendwo, dass Sie "Benutzer" als Schlüssel für Ihr Statusobjekt deklariert haben.