Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Peter Kim
@pk1m
hmm probably good to mention that im seeing this in specs, maybe its a jasmine issue
but it does only happen after a recycle
Joseph B Cimaszewski
@joechimo
D
James Husband
@JamesHusband
Hi all, what is the latest version of Alt?
Joe Shelby
@acroyear
0.18.6. there is no active development on it. there is a fork taking it in a different direction, especially with alt-container.
Zorka Shindova
@zorie
hello everyone, is there any projects that are set up with webpack and alt
i want to build my own web app(project duties) and i want to set it up right using webpack, react and alt as my front-end part
James Husband
@JamesHusband
any reason you want to use webpack?
Zorka Shindova
@zorie
I'm guessing u need some kind of bundler. The idea is to have front-end with react + alt and the backend to be with web api2(from .Net). So I'm not sure how to setup my UI part
Joe Shelby
@acroyear
there is a yo generator for react-webpack-alt which i used for my first project, but decided to just use react-create-app and add alt separately just via npm install --save.
but then, having already used alt, it is fast for me to add stores and actions now
your connectivity to the back-end is in the sources. there's no boilerplate for that, since every back end is different.
Zorka Shindova
@zorie
I was think of webpack to bundle it altogether as one and run react on some port: 3001 for example and then with Ajax to request data from the server which is on port 3000(for example)
Thinking*
Joe Shelby
@acroyear
if anything, the sources idea is the weakest in alt. it really is your code talking to your server and then firing actions to set the data once it is returned
react-create-app handles all that. if port 3000 is busy (your server), then it can automatically flip to the next port up, or you can configure it to use that all the time
"react-create-app handles all that" - the server on the port 3001 and all the packing, i mean.
Zorka Shindova
@zorie
So let me check if I got it correct, a good approach is to run react-create-app and then manually install alt and start coding my front end part
As for the link to the server, I am told to use superagent which I guess I should npm install as well and then do, when the react routing gets to the component -> the component makes the call to the server through superagent, the data that will be sent back as json -> I will have to update the view
Zorka Shindova
@zorie
Am i anywhere near correct? I am new to react, flux and alt
I very much appreciate your responses
Hieu
@khieu
@zorie Have you tried out https://survivejs.com/ ? it's a tutorial on react+flux, which uses alt architecture for flux and webpack to setup the project. I found it very helpful.
Joe Shelby
@acroyear
i don't know anything about superagent (the API I used it just basic GET and POST calls, so I just wrapped the fetch API with functions for each procedure call), but yeah, that's about it. Put your connectivity between your app and the server entirely in the sources folder. The actions or the store call the file in sources. from there, i advise your source just call the actions to populate your store.
in my case i had 2 actions. the first action triggered the source to do the work, which called the second action when the callback/promise returned. that second action populated the store
Hieu
@khieu
@acroyear this is unrelated but have you used dataSources from Alt before ?
Joe Shelby
@acroyear
I found the pattern examples to not really help me much.
so not really. I just went with my own basic class that exposes what I need as I need it.
My problem is the API I had to work with wasn't a "clean" REST implementation. everything was a GET query, for example. so it wasn't worth it to try to tweak things to fit the API I have to work with.
Albert Villaroman
@albert-tse
has anyone experimented with converting alt-container to be an HOC instead that can be used with recompose?
andela-cofor
@andela-cofor
Is this packaged dir still valid ?alt/utils/decorators
Joe Shelby
@acroyear

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 AltContainer component.

We can go a long time without hitting this, but once we do, and we've no idea what the trigger is, it repeats (ad naseum) forever until the app is reloaded. Anybody have any idea what we might be doing wrong that is causing it to trigger? None of the functionality seems broken, we see no visible 'bugs' in our stores or data on screen.

Joe Shelby
@acroyear
co-worker solved problem for me - same store was being added twice (long list of stores) to the AltContainer
Wasif Hyder
@wasifhyder
Can someone advise me on how to add logging to actions / stores?
Joe Shelby
@acroyear
MyStore.listen(function (state) {
// fires every time the store changes, no matter what action triggered it
});
i read somewhere there was a way to log every dispatch but I don't remember what it was
Jean Aurambault
@aurambaj
Hello! Is it possible to listen only to changes on some portion of a store with an AltContainer? Reading the 'inject' doc, I was under the impression it could be used with using 'stores={[MyStore]}' but it looks like the component is re-render each time the store changes.
Jean Aurambault
@aurambaj
I was able to implement it with shouldComponentUpdate. Is there any recommendation on how to design stores/action? like small stores that maps to components VS. big store and some logic in shouldComponentUpdate to avoid useless re-render?
Joe Shelby
@acroyear

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.

Jean Aurambault
@aurambaj
@acroyear thanks!
Joshua Cave
@jaybeecave
does anyone have an example of async loading components
based on a route
#!/home => home.js
only load home js when i hit that route
blueShuttle
@blueShuttle
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?
blueShuttle
@blueShuttle
This was because of the AltJS extension for Chrome... I uninstalled it and everything is good again.
Alex Chobanov
@achobanov
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!
Martin Eden
@MartinEden
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 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?