React、Redux 和身份验证 - 找不到状态

Question

我正在尝试将 redux-auth-wrapper 集成到反应样板中。

根据我的调试工具，浏览器的状态设置正确（用户：{data：null，isLoading：false}），但是应用程序说状态未定义。

mapStateToProps 的状态似乎是正确的？

减速机：

容器/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;

容器/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,
  });
}

这只是反应样板，但与反应路由器 4 示例（auth.js、constants.js、App/reducer.js、App/index.js 等）混合在一起

Answer 1

State 是一个immutable 对象。要将其用作简单的 javacsript 对象，请使用 .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
});

我在任何地方都没有看到您将“用户”声明为状态对象的键。