Where I’m working we are developing : the first virtual advisor for digital . 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. crystal marketing 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 and organize your project for on your team. design everyone 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 “ ” through the app. horizontally There are a lot of articles about this topic (you can find some in the ), that can help you choose the structure that fits you best. Redux documentation Edit: Cool presentation about folder structure .Thanks to here @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, shows a good example. Redux documentation 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 , 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: don’t create confusion Design before, to not cry after. Good about it. guide 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 that shows this aspect Wonderful article 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!

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Rapid tips for your React-Redux application

Too Long; Didn't Read

Company Mentioned

Christian Varisco

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Rapid tips for your React-Redux application

Too Long; Didn't Read

Company Mentioned

Christian Varisco

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES