Using Redux with Meteor?

[seanh]

I think the dispatch functions (or action creators) are called within the CollectionActions.viewChanged function. From what I understand, the idea behind Redux is to use dispatch(it can contain one or multiple actions), and the action will update the reducer, finally the redux store will combine all the reducers within the app. I hope this help

[ciwolsey]

An action is just the object you pass to dispatch() which is typically something like:

{
  type: 'INCREMENT_COUNTER',
}

An action creator is a function that creates an action, and either calls dispatch() directly with it, or more commonly, just returns it so that you can pass it into dispatch like so:

store.dispatch(incrementCounter());  // Increment counter just returns an action as you see above

[diaconutheodor]

Context
I’ve never worked with Redux, I read some documentation, I understand it’s principles and I love them.

I have seen a Meteor app built with Redux + Flow - fully, it uses sagas, to handle auth, register, logging out, it has functions for watching collections, uses promises for meteor calls. It is very well organized. And you really get a feel of what is going on with your app everytime you do something like changing the route, clicking a button, every action that is done, you get absolute visibility. Nothing can happen without you being able to inspect it. Another good thing it that it separates actions from the UI, ofcourse you could do that another way, but redux forces you to do this, which is a good thing.

It took me a while to accomodate, since I’ve never seen something like that, but I have some mixed feelings.

Concerns
So much BOILERPLATE! For something so basic in Meteor. The real gain I see, is that at every given point you know the state, and you can inspect what’s happening, without having to dive into the code. This is a really huge advantage. But the concern is, do you need this for simple apps ? I am a fan of separation of concerns, this means I am a fan of state isolation in components, I don’t want to garbage collect my state when I change the route. It’s not about memory usage, bc that’s absolutely irrelevant even for a huge state tree, it’s a bout the concept.

I always thought that state management, (FLUX) is for apps with a lot of moving parts, for a simple CRM with bunch of different CRUDs is it trully useful ?

The deal is that you know what’s happening everytime. But isn’t there another way to do this ?

Because this advantage kinda leverages the boilerplate, the single source and the state pollution.

[tastemeru]

The deal is that you know what’s happening everytime. But isn’t there another way to do this ?

You could have a look on mobx.

[diaconutheodor]

I know mobx i like it more for managing state, howevs, redux has the action, reducer principle which makes it completely different.

[yxfxmx]

Hey guys. I’m thinking about ways how could I make the front end of a meteor app easier to live with and I’m considering adopting redux (maybe just for local state, maybe for data from subscriptions as well, not sure yet) and I have a few questions to you - 1) what do you think about this https://github.com/samybob1/meteor-redux-middlewares ? maybe someone tried it and could share some thoughts and experience? 2) How can I make a part of the redux store tree reactive, so I could e.g. set some flag there from an action and all the components that have that flag as a prop would automatically re-render?

[alamot]

Thanks @diaconutheodor for nicely summarizng that! Do you know of a good (and up to date) GitHub example using the principles you describe?

I started adding Redux to my Meteor-React stack. But it is a very simple app. I’m very close of refactoring my code, effectively throwing Redux out again (for now).

[alamot]

In reply to 1) about middleware:

For middleware, I think a good starting point is Redux Thunk.
And while you’re adding Thunk, you may definitely want to add the Redux dev tools!

Relating to 2) “auto re-render”:

Not exactly sure if I got it, but when you use connect() (with React-Redux) your component’s props can stay up to date with the Redux Store’s state. Then, you can use React’s componentWillReceiveProps(nextProps) { // do stuff with nextProps } to check for changes and make changes to the UI. I’m currently fleshing out a new app where I’ve taken this approach (at the moment).

[alamot]

So it is not an issue to fill the Store with potentially your whole collection(s)?

I thought this question on SO hit the nail on the head.

[merlinpatt]

This is a silly term coined by Facebook. It’s just a regular function that creates an action which is another word for an object literal with a payload for flux to use.

Thank you for this. I always wondered if there was some other special meaning to it.