Introduce UI state management with Redux ?

[clemsos]

While we are currently switching to React #120 , we may take the extra step and enjoy a real solid way to manage data with Redux.

Actually, this idea occur to me after looking again and again at the  issue with the global scope of SnackBar #121 to notify changes client-wise. It will require us to use a the React's context, which looks like a bad idea.

Just as global variables are best avoided when writing clear code, you should avoid using context in most cases. In particular, think twice before using it to "save typing" and using it instead of passing explicit props.

from React's doc

On the other hand, this is easily solved by a Redux store where actions (events) are accessible to the whole UI, like in this implementation.

Of course, introducing Redux into the whole app just to solve this problem sounds vastly overkill. But then, the more I think about it the more I can see how Redux can be useful, especially to solve an important problem we currently have : the decoupling of UI state and database records.

Currently, when someone moves a node somewhere, its position is updated in the database. Also, if he applies some layout to the graph, all previous positions will be replaced (and erased - see #51 ). Then, by using Redux we can simplify tremendously the process of saving/loading a UI state with nodes positions, possible selections, queries, etc. We will just need to serialize the Redux store into the db and loading it back into the store using a route.

So it looks like Redux will provide an easy way to separate the UI state from the data itself and tie it nicely together. Another interesting use case will be lazy loading (Optimistic UI sounds more 2016 ) for super large graphs (let's say a million node?).

Also we are making a step further from Meteor, so we can eventually drop it completely when needed (see #78 ).

The downside is that I did not find complex example that plays nicely with Meteor. There is some stuff worth reading though, like this one https://medium.com/@spencer_carli/how-i-use-react-native-redux-and-meteor-b69b3875dc00#.lqoatkeuc .

[clemsos]

Redux resources

A very good intro tutorial on the topic : How we redux (with Meteor)

Learn redux with this tutorial. It is video but suprisingly it does not completely sucks.

Some readings about Redux

• Redux VS Flux
• The Redux awesome list
• |functional patterns](http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559) with redux-thunk (returning functions)

Examples with Redux

• A test app made with react+redux+meteor on https://github.com/tomRedox/simpleCRM
• Meteor, Redux + Webpack and the rep
• this goes even further : use meteor only for backend and webpack+react/redux for frontend :

This is just a standard React - Redux app based on my boilerplate. It uses Meteor, but only as a backend. So you need to run both apps.

This is really awesome that I needed only one file to create realtime backend for a custom React app! Thanks to Meteor!

you can bundle React app and use it as a standard css, html and js static files it will still be able to connect to the Meteor backend which should be running (hosted somewhere).

• http://julian.io/react-with-webpack-meteor-as-a-backend/
• https://github.com/juliancwirko/react-redux-webpack-meteor

[clemsos]

Why using Redux ?

After some more readings

• Redux is not really a component, it is more an architecture pattern.
• By introducing it, we always know what goes where (components, calls to API, etc.)
• Redux introduce functional programming at the top of the client app, so we always know what the
  code should looks like - see existing guidelines, how it should be working, tested, etc
• There is a very active community around redux, with awesome plugins and tools - like this todo /redo in 3 lines of code that may partly solve tx / transaction UNDO feature is not working properly #51

Overall, it will make the app more solid and easier to conceptualize, abstract and write.