mapStateToProps must return an object. Instead received undefined

Question

I'am using react with redux on the frontend and calling elixir phoenix backend API. Everything seems to work but i have this error in my javascript console

Error: mapStateToProps must return an object. Instead received undefined.

I have implemented the redux logger and this is the objects as seen from him ReduxLog

I can not see anything incorrect there, after the action the objects are all correct. I can see in phoenix that the user has both joined the socket and the channel.

since this error seems to be around mapStateToProps I had a better look at that code

import React from 'react';
import {
  connect
}
from 'react-redux';

class AuthenticatedContainer extends React.Component {
  componentDidMount() {
    const {dispatch} = this.props;
  }

  render() {
    const {currentUser, dispatch, socket} = this.props;
    if (!currentUser) return false;
    return ( < div id = "authentication_container"
      className = "application-container" >
      < div className = "main-container" > {
        this.props.children
      } < /div>
            </div >
    );
  }
}

const mapStateToProps = (state) => ({
  currentUser: state.session.currentUser,
  socket: state.session.socket,
  channel: state.session.channel,
});
export
default connect(mapStateToProps)(AuthenticatedContainer);

here is then the session reducer

import Constants from '../constants';

const initialState = {
    currentUser: null,
    socket: null,
    channel: null,
    error: null,
};

export default function reducer(state = initialState, action = {}) {
    console.log(action)
    switch(action.type) {
        case Constants.CURRENT_USER:
            return { ...state, currentUser: action.currentUser, socket: action.socket, channel: action.channel};

        case Constants.USER_SIGNED_OUT:
            return initialState;

        case Constants.SESSIONS_ERROR:
            return { ...state, error: action.error };

        default:
            return state;
    }
}

and the combined reducer

import { combineReducers }  from 'redux';
import { routerReducer }     from 'react-router-redux';
import session              from './session';
import registration         from './registration';

export default combineReducers({
    routing: routerReducer,
    session: session,
    registration: registration,
});

When i go through my code and try to debug I can not find any instance when the state is undefined for those props. I'am using a lot of code from https://github.com/bigardone/phoenix-trello.

All help will be greatly appreciated.

Best regards Björn

Have you defined the initialState object used in state = initialState? — Igorsvee
Yes, updated the session reducer to show the whole file, sorry about not doing that before. — Fenix
Well I'm not sure but from code above I can only recommend to try rewrite mapStateToProps = (state) => ({...}) to pure JS - const mapStateToProps = function (state) { return {...}; } — Majky

Fenix Fenix · Accepted Answer · 2016-07-21T16:06:28

I found out what was causing this problem for me. once this Redux call was finished the code went on and redirected me to another controller. That controller had a view and a mapStateToProps that had an undefined value. Fixed that and the error went away.

But to my limited Redux knowledge I was looking at the wrong things since from what i could see the logger was failing in the action "CURRENT_USER". When it was actually failing in the action "FETCH_MILESTONE" witch was mapping a undefined value to props. Will do some reading on the subject, if anyone reads this and has good understanding of what is actually happening it would be appreciated.

Possible fix for others seeing this problem, check all calls to mapStateToProps and see if any value could be undefined.

mapStateToProps must return an object. Instead received undefined

1 Answers