Better implementation of createContainer

Hello,

I am wondering what people think of wrapping create container in a react component to allow for a cleaner usage, I feel as though using createContainer outside a class and having a function that’s not part of your component to specify what data is required for the component is somewhat segmented.

so I have been trying to figure out a cleaner way to use createContainer in my project and I have come up with something that I personally feel is a better what to use createContainer.

My approach was to use a React.Component to allow me to pass data to sub components.

I create a component that wraps the child component and use the render function to wrap the child in a container using the top level scope to control the data requirements.

import React, { Component } from 'react';
import {createContainer} from "meteor/react-meteor-data";

/**
 * Wrap a child render a child component that has been connected with a data
 * context. 
 */
export default class DataContainer extends React.Component {
  render() {  
    return React.createElement(
      createContainer(this.props.context.handle, this.props.children.type)
    );
  }
}

This simple component will allow cleaner usage IMO for developers, here’s an example usage

import React, { Component } from 'react';
import DataContainer        from '/imports/ui/DataContainer'

export default class HomepageContainer extends Component {

  /**
   * Subscribe and Return required data
   * @type {Object}
   */
  _getMeteorData() {
    return {
      user: Meteor.user()
    }
  }

  /**
   * Render Function
   */
  render () {
    return (
      <DataContainer handle={this._getMeteorData}>
          <HomepageView />
      </DataContainer>
    )
  }
}

Inside the HomepageView the props file will be populated by the data returned by _getMeteorData, and will reactively re-render HomePageView when the data changes

This is just a working POC to demonstrate the implementation / API.

What do you guys think, is this better than using createContainer, can yo usee any issues with doing this?

Regards.

Original Thread: https://github.com/meteor/react-packages/issues/228 .

2 Likes

I’ve been using this link as this is a more reusable data container… Try comparing it with your proposed solution

I may have misunderstood you implementation with the solution on the link I pasted