React Native: menu.isDisconnected undefined is not an object

Hi all.

I am following the React Native tutorial here: https://blog.sendbird.com/react-native-chat-tutorial-3-menu-screen/

When I add the disconnect functionality, following the code exactly as it is in the tutorial, I am getting the same error as this StackOverflow question: https://stackoverflow.com/questions/56725477/undefined-is-not-an-object-evaluating-menu-isdisconnected

Can anyone see what is wrong? Let me know if you need additional details

I have committed this to my github to give more detail: https://github.com/emmaduttoncode/SendbirdChat/commit/1e220afd5abde51fd150b97a04a694e1e4d8ee51

@emmad I have brought this issue to our engineer/product team. As I mentioned in the previous topic, these react-native posts were written a while ago and might not be the best tutorial to follow.

To find the most up-to-date information, please refer to the SendBird documentation that contains Sample App(Github repo) **

Hey @emmad! Congrats on getting over that first hurdle! You’re almost there :slight_smile: Thanks for posting this on Github. Loved your first commit message “I dont really know what im doing” lol classic! Skip to the bottom for the solution: I got your App working. :smiley:

First of all, I’d 100% would echo what @eric.kim said about not following that old tutorial. Just from a quick look, it’s super outdated. RN literally changes every month, with a 3yr old tutorial you’re bound to run into errors. It’s also a bit overkill for a Starter App. Redux on a starter app - way too much. That being said, Redux was your culprit and I have the solution for you below!

These red screens of death will soon become your best friend as a RN developer. Notice the error says “menu.isDisconnected” is “undefined”. This basically tells you what’s happening in detail. It literally means, “hey, I can’t find this menu.isDisconnected function you want me to run”.

When you attempt to run the “disconnect” action, you’re trying to dispatch something that is unknown to your app. You make it known by linking up the reducer (what tells your Redux based App what to actually do) when the action is dispatched.

Solution

  1. Open reducer/index.js

  2. Link up ‘menu’ in the combinedReducers method as follows:

    import { combineReducers } from ‘redux’;
    import login from ‘./loginReducer’;
    import menu from ‘./menuReducer’;

    export default combineReducers({
    login,
    menu
    });

  3. Run the app and you’re golden!

Happy coding :metal:

2 Likes

@emmad - just a quick note, regarding that yellow warnings you see on the bottom of the App. This just goes to show how outdated that tutorial is. Lifecycle method: componentWillReceiveProps() has been deprecated for a while now and no longer officially supported by RN.

You can learn more here:

1 Like

Thank you SO MUCH David for this incredibly detailed and helpful response. I will fix this up and yes noted that this is a very out of date tutorial. I will move to using the updated docs as @eric.kim suggested - I felt like it would be good to follow a tutorial to guide me through it as a beginner, but you are right, it is running me into more trouble than not!

Thanks so much for all your help. I really appreciate it :innocent:

@emmad @inrecovery You guys are awesome!! and It just make me feel super warm and touched by just witnessing how people are helping each other :slight_smile:

@emmad Yes, I brought your idea and pain point that you shared about the outdated blog and we are actively discussing how to maintain the versions while we keep our product development velocity.

@inrecovery You are truly a code warrior! I really respect all of your knowledge sharing :smiling_face_with_three_hearts: :love_letter: