React, Redux and Authentication - not finding state

Question

I am trying to intergrate redux-auth-wrapper into the react boilerplate.

According to my debugging tools, the browser has the state set correctly (user: {data: null, isLoading: false}), however the App is saying that state is undefined.

mapStateToProps does seem to be given the state correctly?

Reducer:

containers/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;

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

This is just the react boilerplate, but mixed with the react router 4 example (auth.js, constants.js, App/reducer.js, App/index.js etc)

Abhinav Jain · Accepted Answer · 2017-10-13 04:22:29Z

2

State is an immutable object. For you to use it as an simple javacsript object, use .toJS().

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

Let me know if this solves.

answered Oct 13, 2017 at 4:22

Abhinav Jain

3391 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Codematcha Over a year ago

Thanks, I implemented this slightly differently (using selectors), but not using .toJS() was the problem!

Abhinav Jain Over a year ago

No problem sir ☺

Adrian Forsius · Accepted Answer · 2017-10-13 00:54:51Z

0

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

would this not return state.data and state.isLoading?

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

I don't see anywhere that you've declared 'user' as a key on your state object.

edited Oct 13, 2017 at 0:54

Adrian Forsius

1,4562 gold badges21 silver badges30 bronze badges

answered Oct 12, 2017 at 16:19

Jenna Rajani

2432 silver badges3 bronze badges

1 Comment

Codematcha Over a year ago

No, it is only setting the original state of the userReducer to {data: null, isLoading: false}. The key I am using is being set by the createReducers function (user: userReducer). My debugging tools show the state generated correctly.

Collectives™ on Stack Overflow

React, Redux and Authentication - not finding state

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related