CODEWITHSUNDEEP
reactjsreduxphoenix-frameworkreact-redux
Fenix
Fenix

Reputation: 33

mapStateToProps must return an object. Instead received undefined

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

Upvotes: 2

Views: 3745

Answers (1)

Fenix
Fenix

Reputation: 33

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.

Upvotes: 1

Related Questions