actually what you were doing is right. the altContainer intentionally fires a redraw on its children when any change happens. that's its job.
so you need to use shouldComponentUpdate in your components to keep them from changing if the state changes for reasons it doesn't care about.
optimizing that can happen in 2 ways. 1) use multiple stores and multiple alt containers around different parts of your app, or 2) have a controller component that divides up the properties of the store into separate items that the real components need to know, so they don't necessarily rerender because their own properties might not be changed.
based on a route
#!/home => home.js
only load home js when i hit that route
I'm trying to load an AltContainer that has many nested AltContainers. I'm running into Uncaught TypeError: Converting circular structure to JSON. I debugged it to the default dispatcher trying to JSON.stringify payload.data.alt.FinalStore.alt.FinalStore... Are AltContainers meant to be used in this manner? What are some options besides a custom dispatcher to fix this?
Hello guys. I'm just a beginner here, trying out flux with Alt. I followed this tutorial: http://sahatyalkabov.com/create-a-character-voting-app-using-react-nodejs-mongodb-and-socketio/#step-19-deployment . Now I am building my own app, about movies. I have a component - MovieCard, which sends ajax request to retrieve posterImg from foreign api, inside the componentDidMount method. I must be doing something wrong, because when I have two or more movies, I get multiple dispatches error. Topic in StackOverflow : https://stackoverflow.com/questions/44720979/flux-with-alt-simultaneous-dispatches-means-wrong-design-pattern. I'd really appreciate some help, because I'm on clock here :) Thanks!
Hi. I'm using remote data sources, as described at http://alt.js.org/docs/async/.
So when the user navigates to new page I do something like
So when the user navigates to new page I do something like
myStore.fetchRabbits. Sometimes, this results in an error that is "expected" (for example the user's access token has expired). These errors get handled fine by the error action I specified when I set up the async source. However, AltJS then rethrows the exception and my console.log fills up with unhandled exceptions.
To get around this problem I invoke my fetch like this
myStore.fetchRabbits().catch(doNothing), where doNothing is just a no-op function I wrote for the purpose. This means when the exception gets rethrown it gets caught here and silenced.
But now I am adding
shouldFetch support to my sources. If shouldFetch returns false, the fetchRabbits function doesn't return a promise, it just returns null. So I get a different set of exceptions filling up my log, complaining about calling catch on a null object.
How am I meant to be handling all this?
Thanks!
then it returns the data in to your store
if you want to follow Alt conventions
Thanks for the response. Okay, so the way in which you are meant to use async methods is something like this?
function inResponseToSomething() {
myStore.fetchRabbits().then(rabbits => myAction.update(rabbits)).catch(doNothing);
}I have been instead specifying myAction.update as the success action in the async source. But that isn't the correct way to do things?
because the data is sent to the store, other components can be aware of the state and use the data if needed
Hi, guys
I have a small trouble with parent and children components. So there is
Parent AltContainer -> DataLayout -> Inside DataLayout there are some another
AltContainer(s) - Big smart components.
After Parent AltContainer is cleared unlisten events in children components
don't fire.
@sanjaysamant Check actions bindings in store and and do the same if u r usinf ALT source
what you might need is
someAction.defer() instead of someAction().
In my experience, the problem is typically:
- Some component calls
componentDidMount() { MyStore.loadSomething(); } loadSomethingdispatches aloadingaction, e.g. via dataSource, to indicate busyness- But some other action, probably some
successhat caused the component to be mounted in the first place, and it being mounted is still part of thesuccessdispatch and while that hasn't finished, the system is trying to dispatch the nextloadingaction - The solution for me is typically
componentDidMount() { setTimeout(() => MyStore.loadSomething()); }
Hello Guys, I have a problem with my React Component,
Ok, this is how it goes... I have a
any Idea?
Ok, this is how it goes... I have a
SearchComponent for searching your address then I have a MapComponent for displaying a map. now I need to have my SearchComponent allowing a user to put his/her address then click submit then the map location changes to the input address, and my SearchComponent needs to have Googles AutoComplete fro places,any Idea?
this is my
SearchComponentimport React, { Component } from 'react'
import { MapContainer } from '../Map/MapContainer.jsx'
import Geosuggest from 'react-geosuggest'
export class SearchAddress extends Component {
constructor (props) {
super(props)
this.state = {
address: ''
}
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit(e) {
e.preventDefault()
console.log('value ',this.refs.srch.value)
}
onChange(){
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input size="35" ref="srch" type="search" id="search" placeholder="Search..." />
<button submit={this.handleSubmit} >Serach Address</button>
</form>
</div>
)
}
}
@SiyabongaNzulwana For getting your MapContainer to update based off your SearchAddress input, you should be using actions and stores. its pretty simple, your components will listen to your stores. primitive way to do it is have your handleSubmit fire an action with the address. your MapStore would listen to this action and sets address in its state. Your MapComponent will be listening to the MapStore and will rerender with the new address.
specifically, I'm getting this error
and it's due to me using this line:
export default alt.createActions(BusinessesActions)
where businessActions is a standard action class
I've googled all over the place and I have no idea why this code (which is nearly identical to the alt.js tutorial) is causing such a basic issue as not being able to construct an action class, despite it working in production just fine
the only thing I can think of that might be causing it, is that in production, we use webpack, whereas the test doesn't need to
Hey, I am looking for some example or documentation of unit tests of action functions based on asynchronous code in the way is described in , fetchLocations in Fetching Data page of 'Getting started' guide . The point is that I want to assert whether updateLocation, which is actually a mock function is invoked, when locations are retrieved, and locationsFailed is invoked when promise is rejected. Is someone aware of any example any doc or example somewhere?
@ScottAlbertine Hi Scott, I got your error sometime ago, and I had to use functions instead of classes:
export function UnwrappedActions() {
if (!(this instanceof UnwrappedActions)) return new UnwrappedActions();
this.actionXXX = function(arg1, arg2) {
};
}
export default Alt.createActions(UnwrappedActions());
you set up a listener that invokes your mock, afterwards you can check if it was invoked
