Question

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

根据我的调试工具，浏览器的状态设置正确（user：{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

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
});

我没有看到你声明'user'作为你状态对象上的键的任何地方。

React，Redux和Authentication - 找不到状态

2 个答案: