反応、Reduxと認証 - 状態を見つけることができません

Question

私はredux-auth-wrapperを反応の定型文に入れ替えようとしています。

私のデバッグツールによると、ブラウザは状態が正しく設定されています（ユーザ：{data：null、isLoading：false}）。

mapStateToPropsは状態が正しく指定されているようですか？

リデューサー：

コンテナ/アプリケーション/ 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; 

コンテナ/アプリケーション/ 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, 
    }); 
} 

これはちょうどザは、定型の反応であるが、ルータ4の例を反応させる（auth.js、constants.js、APP/reducer.js、APP/index.jsなど）

Answer 1

状態はimmutableオブジェクトです。単純なjavacスクリプトオブジェクトとして使用するには、.toJS()を使用します。

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

これが解決すれば教えてください。

Answer 2

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

と混合し、これをしないだろうstate.dataとstate.isLoadingを返しますか？

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

あなたの状態オブジェクトのキーとして「ユーザー」が宣言されている場所はありません。