Using Redux to manage subscription data for Meteor apps

help
1

Does anyone here use Redux to store subscriptions or MongoDB data centrally and then disseminate and make changes with it via actions and action creators?

I’ve used Redux quite a bit in regular Express and Node applications and I was able to load MongoDB data on the server and attach the store to the window object via a string of the HTML template that gets sent to client as SSR template.

If I can’t use Redux for subscription data this way, then I really see no point in using Redux at all in Meteor. Reactive containers should do the job just fine.

Does anyone use Redux in their apps to achieve such a functionality? How do you do it? Thanks!

2 Likes
2

Bump if anyone has done this before in any Meteor application.

3

That what I always do and that’s the heart of our SSR engine: https://atmospherejs.com/ssrwpo/ssr

This app, for instance, uses this engine: https://www.panoplycity.com/

4

If you’re going to use Redux, then why not use Apollo rather than Meteor pub/sub?

5

How do you load the initial data from your collections? Do you still use reactive containers to do it on client side or you send it down from server?

6

It depends on the collection.

Some are public and required to render pages that are indexed by Google. Hence, these are injected into the HTML payload.

Some are specific to the user. At the top of my app, I use Tracker to subscribe to the collections that are requiring a connected user and I when subscribed I inject the content into redux.

This way I can manage data serialized in the the HTML payload and data from pub sub only using redux.

1 Like
7

What is really neat with this approach is that you can use React.PureComponent everywhere. When new data arrives, only the part that requires an update is indeed recalculated in the virtual DOM and apply to the real DOM. It’s super efficient.

1 Like
8

I’m currently looking through your github repo via the ssr demo and trying to wrap my head around all the different parts.

I’ve never seen it done on Meteor the way you are doing it. Reminds me a lot of just Node and Express.

9

That’s the beauty of it. You are leveraging the power of Meteor without crushing your server. You only use reactivity and pub/sub where you really need it.

Plus we have added few other niceties like HTTP 304, high speed caching, … It really makes the difference for my customers.

2 Likes
10

I can see that in your website above. On a wordpress website, that thing would be slow. Yours is like a super charged platform on steroids or something.

It’s a lot more complex than the traditional meteor data retrieval and binding, but I’m going to work through it and learn. This is really well done. I appreciate your work with this.

1 Like
11

I like using Redux with Meteor. Here’s a blog post on the topic: https://fabricatech.wordpress.com/2016/09/06/meteor-and-redux-and-angular-2/

12

It seems like apollo does a lot of what redux does. Is it worth adding redux on top of apollo-client in your experience?

13

Apollo uses Redux to store its data. You can’t use Apollo without Redux (at least not out of the box).

14

I think there is a real use-case here to use Redux with Meteor and without the overhead of running an Apollo server. You’d set this up by adding what I call “reactions”, which are basically autoruns/listeners for Meteor data. Within those reactions, you’d dump the data from Meteor into Redux, and this is the only place where you’d be calling reactive Meteor data. Then, within the app, you just use Redux to look up the data that was piped in through the Meteor autoruns.

15

It sucks you can’t just setup the redux store as easily as you can write a container with createContainer or composer.

16

Check out recompose https://github.com/acdlite/recompose

17

The best way to do this that I’ve seen is https://github.com/samybob1/meteor-redux-middlewares

We’ve written a Subscribe component on top of meteor-redux-middlewares that works like:

<Subscribe
  subscriptionKey="publicationName"
  meteor={meteor}
  collection={someCollection}
  subscriptionParams={{}}
  query={{ someParam: 'whatever' }}
>

Things are pretty quick and easy to wire up.

2 Likes
18

hi @jfols, i am actually using meteor-redux-middlewares but i can´t set subscriptionparams when the id_param of the subscriptions change.
would you share your "<subscribe …/>! component code with me. i will so greatful with you.

19

This actually looks really good and like the best option I’ve seen.

Anything else change since that time?

20

I looked into implementing this, but I see no way to load your subscription before a page renders so everything can then be displayed accordingly.