React — Structure Container Component In Meteor

Image for post
Image for post

Introduction

Finally, I settled down with Meteor for backend, React for frontend, and Vanilajs ES6 MVC for the app extension (this was the most interesting part of the project. I will talk about it in another blog). At first things went well and smooth. Needless to say that React was so amazing that I completely changed my thoughts when programming.

But soon later, since this was the first time I had really built such a big project with React, things started to get messy. I encountered a problem that every big project coded in React had. Hence, I have this post written to let you know what problem was and how I attempted to solve it.

Prerequisites

Unfortunately, this post is not aimed for beginners because I am writing about experience I learned in a big project, not just the way to use React for Meteor project. So it may require readers to have the following knowledge to understand what I am going to write:

The problem that I encountered

Follow the unidirectional data flow principle, I created a container component for each routes for the problem. This component is in charge of almost every logic stuff for the route it is being used for. E.g. it takes care of subscribe data/call methods from Meteor server, is a middle man for its children components talking to one another. With all those missions, soon it becomes a very big and fat guy.

The file in which I coded the container component in was about 700 lines when I just finished about half of the work. This was clearly unacceptable. If I had ignored this problem and kept coding to get the job done fast, it would have been a nightmare for maintainer/debugger.

Knowing that this was my company’s main project, meaning that my colleagues and I would be working on it for years, I stopped coding features and started reviewing the code.

First attempt

  • Component’s must-have functions: getInitialState, getMeteorData, render, etc…
  • Handler functions: all event handlers for all container’s children components
  • Helper functions: functions to help get necessary data for container’s children components based on container props and state. There functions are merely pure functions, they take input and produce output without touching the container state or talking to Meteor server.
  • Logic functions: functions to modify the component state, call methods from server. These functions are called by event handlers in response to user actions.

With this model in mind, I decoupled the last three groups’ functions into three separate files and imported them back in the container through mixins.

The directory of the container looked like this:

root
| ...
|---...
|---poppi:client-container-example-component
|---client
|---components
|---subcomponent1
| ...
|---subcomponent2
| ...
| ContainerExample.jsx
| ContainerExampleContainer.jsx
| ContainerExampleHandlers.js
| ContainerExampleHelpers.js
| ContainerExampleLogicFuncs.js
| package.js
|---...

And also the code of the container

READ FULL ARTICLE HERE

Written by

Designveloper is leading software development company in Vietnam. We offer Web development, mobile application, UI/UX Design, VOIP. www.designveloper.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store