Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
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?
Thanks!
Martin Eden
@MartinEden
Okay, I figured out the null was because I was returning null in the local part of my async source. Should I return a promise here?
Em Talukder
@heavyhorse
@MartinEden I think you should be calling that in your actions
then it returns the data in to your store
if you want to follow Alt conventions
Martin Eden
@MartinEden

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?

Em Talukder
@heavyhorse
@MartinEden I normally call it like…Actions.updateObject(data).then(…) this call will then update the store. and you can choose whether or not to use the callback
because the data is sent to the store, other components can be aware of the state and use the data if needed
Rajat Bhardwaj
@rajatb94
Having issues in integrating alt data source in stores ... can anybody help me?
sanjaysamant
@sanjaysamant
"Uncaught ReferenceError: Invalid action reference passed in " when I am following document example
Jovica Aleksic
@loopmode
@goatslacker hi there. Any plans of updating to latest react? connectToStores from the utils package is using React.createClass, which will be deprecated soon - latest react gives warnings. I guess it's "PRs welcome"? :)
VasyaPetroff
@VasyaPetroff

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.

Rajat Bhardwaj
@rajatb94
can not dispatch ... a store is already dispatching..... tried to use waitFor but no solution
@sanjaysamant Check actions bindings in store and and do the same if u r usinf ALT source
Jovica Aleksic
@loopmode
@rajatb94 waitFor is for something different actually
what you might need is someAction.defer() instead of someAction().
In my experience, the problem is typically:
  • Some component calls componentDidMount() { MyStore.loadSomething(); }
  • loadSomething dispatches a loading action, e.g. via dataSource, to indicate busyness
  • But some other action, probably some success hat caused the component to be mounted in the first place, and it being mounted is still part of the success dispatch and while that hasn't finished, the system is trying to dispatch the next loading action
  • The solution for me is typically componentDidMount() { setTimeout(() => MyStore.loadSomething()); }
Siyabonga Nzulwana
@SiyabongaNzulwana
Hello Guys, I have a problem with my React Component,
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?
Siyabonga Nzulwana
@SiyabongaNzulwana
this is my SearchComponent
import 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>
      )
       }
}
Peter Kim
@pk1m
@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.
Mikhail Sedletsky
@sedletsky
helau bitches