altjs / connect-to-stores Goto Github PK
View Code? Open in Web Editor NEW'Higher Order Component' that controls the props of a wrapped component via stores.
'Higher Order Component' that controls the props of a wrapped component via stores.
The module use require('react') causing an error when using react native
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
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
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?
I've never seen an @
inside of a name before. Does this come within the alt package?
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'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?
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.