Redux or Komposer for storing Meteor user data

react
1

Hi all,

I’m revisiting Meteor for a new app I’m making and rather than go down the old reactmeteordata route that I used previously (about a year ago) I thought I’d learn some new stuff!

The app is for EVE Online, an online MMO. I already have SSO working with the EVE api, but a lot of stuff ties into the EVE character ID which is currently stored in the Meteor User Profile fields. For example, to get the character avatar image requires using the character ID.

Ideally once someone has logged in I’d like to keep the character ID stored (which leads me to think I should use Redux) in an application store so I can use the ID anywhere in my app.

For reference, here is something that doesn’t work with Komposer (I’m getting “Uncaught TypeError: Cannot read property ‘profile’ of undefined(…)” error):

render() {

   const { user } = this.props;
   console.log( user.profile.eveOnlineCharacterId );

However if you include it in the return block it DOES work. But I need to string it all together outside the return block so I’m a bit stuck.

What does work is this:

render() {

   const { user } = this.props;
   console.log( user );

Which is curious! It returns the Meteor user object.

The code I’m using for Komposer is as follows:

// Meteor reactive wrapper
function getTrackerLoader( reactiveMapper ) {
  return (props, onData, env) => {
    let trackerCleanup = null;
    const handler = Tracker.nonreactive( () => {
      return Tracker.autorun(() => {
        // assign the custom clean-up function.
        trackerCleanup = reactiveMapper( props, onData, env );
      });
    });

    return () => {
      if( typeof trackerCleanup === 'function' ) trackerCleanup();
      return handler.stop();
    };
  };
}

// Compose the Meteor User data
export const composer = ( props, onData ) => {
  const user = Meteor.user();

  onData( null, { user });
}

const TopNavigation = compose( getTrackerLoader( composer ) )( TopNav );

Any help and / or advice would be much appreciated :slight_smile:

Thanks,

Tom.

2

If you haven’t looked in a year, there’s a new API similar to Redux connect or komposer for using Meteor data. Check it out here: https://guide.meteor.com/react.html

It’s what we use everywhere in our apps and I haven’t yet seen a good reason to use something else, but I suppose learning new things can be fun.

3

Thanks for your reply @sashko! I tried the createcontainer method originally but ran into the same issues… Is there something weird going on because I’m wanting to use Meteor.user()?

4

@sashko sorted this now using your createContainer method! I needed to check if the user was loggingin before trying to do anything with the character ID. Now it only looks for the ID after the user is logged in.

Thanks for the help :slight_smile:

1 Like