Using a state management library in Meteor

help
1

Hello everyone!

I’m a little bit confused about how to integrate a state management library (like Redux) in my Meteor app.

Some questions:

  1. Anyone has already used a stack like that?
  2. Do I need a state management library?
  3. If yes, where do you call methods?
  4. How does react-meteor-data fit in a stack that uses redux?

Any suggestion is precious, for me.

Thx!

2

In general you don’t need it. Do you have a specific case for which you think you need to manage state manually?

3

Hi @lucalanzano81,

I use Redux with React.

  1. Yes
  2. Yes
  3. In the action. Action is a function you dispatch via Redux instead of simply calling like all other functions. The results of a dispatched action you pass to an object such as:
{
  type: 'DID_SOMETHING', // this is your action name so you can identify it when it hits into the reducer
  payload: res // the result of your method.
}

Everything comes in an action sync or async from Meteor or other APIs, is to be passed to the Reducer and all computations should be done in the reducer and not in the action.
4. If you only use Methods, I think react-meteor-data has no role in the stack.

I often offer 1 to 1 to people who want to learn things that I already know. This is at no cost and the benefit I am looking for is just to make friends. If you want a Skype and see live how to implement Redux with React or Redux Toolkit with React, I am here.

2 Likes
4

I was thinking to use it to reduce the use of pub/sub.

5

I appreciate your answer…thx!

In your case, then, you’re using a method’s call inside the redux action. Is it right?

And what about maintaining in the store the global user’s information returned from Meteor.user()?

Also, I think I could use react-meteor-data for real-time only.

6

Keeping state consistent in multiple places is a hard problem. I would only start with it personally if all other solutions are not able to solve for example a performance problem.

It is a bit of a cache-invalidation issue you will run into. Which is hard.

Simply reducing amount of subscriptions for example can already make a big difference. Also check the redis packages which improve performance.

7

I am subscribed to very little data of the user via a Redux action:

const subscribeBasicUser = () => {
  const userId = Meteor.userId()
  return userId
    ? dispatch => {
      const handleUserBasic = Meteor.subscribe('userBasic')
      Tracker.autorun(async () => {
        dispatch({
          type: USER_BASIC,
          data: await Meteor.users.findOneAsync(Meteor.userId(), {
            fields: {
              'profiler.counts.chatBadge': 1,
              'profiler.counts.contactsBadge': 1,
              'profiler.counts.notifications': 1,
              'profiler.counts.buddies': 1
              // lastPost: 1, // TODO do not subscribe to this - add to extras
              // 'profiler.counts': 1, // TODO do not subscribe to this
              // slug: 1 // TODO do not subscribe to this - add to extras
            }
          }),
          handleUserBasic
        })
      })
    }
    : { type: 'RESET_USER' }
}

My Reducers looks something like this: (this is with Redux not with Redux Toolkit)

case USER_BASIC:
      if (action.data) {
        return { ...state,
          currentUser: action.data
            ? {
                ...state.currentUser,
                profile: { ...state.currentUser?.profile || {}, counts: { ...state.currentUser?.profile?.counts, ...action.data.profiler?.counts } },
                _id: action.data._id
              }
            : null,
          handleUserBasic: action.handleUserBasic
        }
      }
      return { ...state }

Everything else I need from a user, I fetch through a method. I want to keep the meteor user subscription through Redux so that I can react (as in having a reaction :)) when a user logs out or is being logged out by the system. I do things such as resetting the global state to defaults.
You can do real time data via Redux but I wouldn’t go that way as the norm. Real time data is real time when in view so better to attach it to a view directly (with the hooks provided by react-meteor-data)