altjs / connect-to-stores Goto Github PK

I am using react 15.4.1 and this function (connectToStores) uses React.createClass which is deprecated.
In fact in the console I get this warning:

Warning: StatefulWhateverComponent: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

I have this simple code:

import React from 'react';
import Store from '../stores/Store';
import Actions from '../actions/Actions';
import connectToStores from 'alt/utils/connectToStores';

@connectToStores
class DefaultInput extends React.Component {
  static getStores() {
    return [ConsoleStore];
  }
  static getPropsFromStores() {
    return ConsoleStore.getState();
  }

  render({inputId}) {
    return <input id={inputId}/>;
  }
}


class MyInput extends DefaultInput {
  render() {
    return super.render({
      inputId: "myInput"
    });
  }
}

And when i try to render MyInput, it says "Cannot read property 'inputId' of undefined".
Any suggestions?

when accessing child component by "this.refs.mycomponent", it is supposed to be a react component instance, but if MyComponent is exported by

export default connectToStore(MyComponent)

this.refs.mycomponent returns a object named as "Constructor" but not the real component, so I cannot access state and methods in MyComponent

Hi,

I have this code :

@connectToStores
class App extends React.Component {

  static getStores() {
    return [UIStore, RouteStore];
  }

  static getPropsFromStores() {
    return {
      ...UIStore.getState(),
      ...RouteStore.getState()
    }
  }

  constructor(props) {
    super(props);
    this.handleLocateClicked = this.handleLocateClicked.bind(this);
  }

  componentDidConnect() {
    this.handleLocateClicked();
  }

  handleLocateClicked() {
    this.refs.mapComponent.locate();
  }

  getCurrentBoundsCenter() {
    if (this.refs.mapComponent !== undefined) {
      return this.refs.mapComponent.getBoundsCenter();
    }
    return this.props.userPosition;
  }

  render() {
    var { searchText, showSuggestions, locations, ...other } = this.props;
    let buttons = [
      {
        'id': 'map-view-button',
        'value': 'road',
        'text': 'Map'
      },
      {
        'id': 'satellite-view-button',
        'value': 'satellite',
        'text': 'Satellite'
      },
      {
        'id': 'cycle-view-button',
        'value': 'cycle',
        'text': 'Cycle'
      }
    ];
    console.log(this.state);
    return (
      <div role="main">
        {this.props.showRoutingWidget ?
        <RouteSearch routeStartText={this.props.routeStartText} routeEndText={this.props.routeEndText} showSuggestions={showSuggestions} showInstructions={this.props.showInstructions} locations={locations} route={this.props.route} hasRoute={this.props.hasRoute} map={this.refs.mapComponent}/> :
        <Typeahead searchText={searchText} showSuggestions={showSuggestions} locations={locations} bounds={this.getCurrentBoundsCenter()} />
        }

        <Toolbar routeMode={this.props.showRoutingWidget} onLocateClicked={this.handleLocateClicked}/>
        <MapComponent {...other} id="map" ref="mapComponent" />
        {this.props.showLayerMenu ?
        <ActionMenu title="Layers" items={buttons} /> : null}
      </div>
    );
  }
};

export default App;

When store changes, this.props is not updated, I have no idea why. Looking at the code of connectToStores it seems that onChange event should change state.

In the example code,

const MyComponent = React.createClass({
  statics: {
    getStores(props) {
      return [myStore]
    },
    getPropsFromStores(props) {
      return myStore.getState()
    }
  },
  render() {
    // Use this.props like normal ...
  }
})
MyComponent = connectToStores(MyComponent)

MyComponent should be defined with let

I've never seen an @ inside of a name before. Does this come within the alt package?

The module use require('react') causing an error when using react native

I've been trying to solve a timing problem with loading indicators (goatslacker/alt#594) and placing my alt action call inside of componentDidConnect seems to fix the issue, but I'm not really sure what the purpose of the method is, based on the code in this repo.

Can you enlighten me?

I came across the following Warning in my app

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the StatefulDashboard component.

and on farther inspection it appears my Dashboard component, which had already unmounted was connected to a store that had been modified. The connectToStores#onChange was called, which in turn called this.setState(...), resulting in the above Warning message.

I'm thinking an isMounted() check would be applicable in the onChange method:

      onChange: function onChange() {
        if ( this.isMounted() ) {
          this.setState(Spec.getPropsFromStores(this.props, this.context));
        }
      },

Updating like so resolves the issue on my end. Let me know if you agree, and I can create a PR