Rapid tips for your React-Redux application

Where I’m working we are developing crystal: the first virtual advisor for digital marketing. In the past months the application has undergone a complete rewrite of it’s front-end module, migrating from angular to a react-redux stack.

We are so proud of the final result, because we’ve baked a more polished product with improved performances and maintainability.Still, there’s a long way to go from here.

Lots of new features are planned for the forthcoming months, but, I’d like to share with you some useful tips that everybody need to keep in mind while working with a similar stack.

After months of work, I would like to share some little tips on this wonderful stack that would be simple to adopt.

Immediately choose a scalable folder structure.

Don’t underestimate this aspect if you are developing a big project.Folder refactoring is pretty painful, especially in Javascript; this is definitely something that might cost you a lot, both in time and mental sanity.With a scalable structure you can easily design and organize your project for everyone on your team.

We ended up using an hybrid structure, that mixes features folders (one folder for each of the app big feature), and types folder (components, redux, services) for all the files that are shared “horizontally” through the app.

There are a lot of articles about this topic (you can find some in the Redux documentation), that can help you choose the structure that fits you best.

Edit: Cool presentation about folder structure here.Thanks to @hinoczek

First design your redux store.

The redux-store is the focal point of your application.If the store is well designed it will be less difficult to work on it.Also, you will increase performance (good design — less operations).

Remember that someone online probably resolved your problem before you, look at any big company that’s using redux and how they structured their store.

Be inspired by others.

Again, Redux documentation shows a good example.Dissecting Twitter’s Redux Store

State vs Props for UI

There really aren’t best practices on this topic.We wrote very fast and when we were in the middle of coding we had two types of practice.Some devs/team member/person may use the redux store to manage some of the UI, some others will use the component state instead.So don’t create confusion, choose the way that fits you best and be coherent.Do I need to put this part on redux-store? What can I hold on the component’s state?In this particular case we are talking about component’s state and props, but remember:

Design before, to not cry after.

Good guide about it.

If you use babel, when you have the opportunity to write ES5, do it.

It can seem weird, but it isn’t.I dream of a world where javascript code can look slick and good both in the editor and the browser console.Well, we don’t exactly live in that world (yet).Everyone likes to write ES6, but it forces us to use a transpiler.Babel is very cool, but in a lot of cases it increases the amount of your code to translate to the ES6 feature.

Too much code = Too slow

Wonderful article that shows this aspect

Conclusion

I hope that this article can help you to avoid some of the problems we encountered.

Thanks to my team and Have fun coding!