Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Michelle Tilley
@BinaryMuse
@ttrmw Good question. Id lean toward generally yes, kind of like having side effects in getInitialState or render; those functions are all expected to be pure and can be called a lot without warning so you could be setting state a lot. Since getStateFromFlux sets state anytime watched stores change I'm not 100% I understand the issue being solved for though so its hard to say
Thomas Millward Wright
@ttrmw
Basically, I'm using tcomb forms. It requires that I pass down an options object that will contain the store backed items. I need to use its t.update method to insert my values without screwing up all the stuff tcomb forms adds
Michelle Tilley
@BinaryMuse
One idea I still think is okay is to return a promise or something from the action creator (I believe that works iirc, if not it should be fixed) and use that for control flow (but generally only control flow, not data flow)
Oh tcomb form has an imperative api? That seems unfortunate
Thomas Millward Wright
@ttrmw
I'm not at all keen on tcomb forms. A colleague introduced it and we're a little close to needing to ship for me to tear it out :tongue:
Michelle Tilley
@BinaryMuse
That's fair. One common way to bridge those apis is create a component that takes props, and in willReceiveProps or didUpdate etc calls the imperative api
So like a tcomb wrapper that doesn't have to connect directly to the flux flow
Thomas Millward Wright
@ttrmw
Hm, that seems like it has potential
Michelle Tilley
@BinaryMuse
There is an example of this in a talk I have a while back about Kinetophone. This component wraps an imperative DOM/Audio api. https://github.com/BinaryMuse/react-kinetophone/blob/master/src/audio_clip.js
Thomas Millward Wright
@ttrmw
Is the talk informative on the subject? Always down for a good talk :)
Ah, googled and the talk title says it all. Will watch later - thanks so much
Michelle Tilley
@BinaryMuse
Awesome :) hope it helps some. Doesn't go into a ton of detail, is more like a lightning talk thing . also my name was different back then lol
Thomas Millward Wright
@ttrmw
Hey @BinaryMuse - didn't get a chance to watch the talk, will try to today! In the mean time, I've found a less janky solution I think - but is there any danger in calling actions on WillMount?
What I'm doing now is loading the store data on WillMount, then calling getStateFromFlux on DidMount and using its value to set the component local state
I can get away with only updating the component local state once for this component - once the store has loaded it wont change again
Thomas Millward Wright
@ttrmw
Wait scratch that - this approach totally fails if the server response is slow, derp
js
@js08
Hi in react can you guys Tell me how to send analytics data when page loads
Mark Robert Henderson
@aphelionz
Hey all, all the stuff I've seen about mixin workarounds is nearly a year old now - what's the latest on how to implement the FluxMixin and StoreWatchMixin in ES6+ ?
Mark Robert Henderson
@aphelionz
@BinaryMuse ? anybody?
Michelle Tilley
@BinaryMuse
@aphelionz I don’t think there’s a good solution for mixins in ES6 classes myself. If you really want to use classes instead of React.createClass, I would go with a higher-order component solution
Mark Robert Henderson
@aphelionz
I guess if I really want to use ES6 classes I need to switch to a different flux implementation
Mark Robert Henderson
@aphelionz
btw ReactMixin.onClass(NewCarePlan, Fluxxor.FluxMixin(React)); seems to be working
js
@js08

am new to react...i am finding very difficult in writing a simple animation

  • I have anchor tag which is my search icon
  • when I click the search icon the text box should open and when i click the icon the textbox should close back with slide functionality
  • everything they have created inside the sportsHeader class
  • and in render function you can see my html
  • when the page loads I am make the text box as display none
  • when I click the icon the box should open up.
    -providing my code in fiddle too

https://jsfiddle.net/n5Luz6ym/72/

react code

class sportsHeader extends React.Component {
    constructor(props) {
        super(props);
        this.sportsSearchPanel = this.sportsSearchPanel.bind(this);

    }

    sportsSearchPanel() {
        console.log("sportsSearchPanel" +this);        
    }

    render() {

        return (
            <div className={'sportsHeader sportsHeader--' + this.props.layout} role="banner">

                <div className="sportsHeader-NBA">
                    <a onClick={this.sportsSearchPanel} href="javascript:;" className="sportsHeader-NBA-search">
                        <span className="hidden">Search <abbr>NBA</abbr>.com</span>
                    </a>
                    <input className="sportsHeader-NBA-search-input" type="text" />

                </div>

            </div>
        );
    }
}


css

.sportsHeader-NBA-search-input {
    border: 1px solid red;
    display: none;
}
Michelle Tilley
@BinaryMuse
@js08 I’ll try to take a look at this when I’m home, but just so you know this room is specifically for the Fluxxor library. You may have more luck posting in a more generic React channel, or on Stack Overflow ^^
js
@js08
@BinaryMuse I tried other places too but no luck :(
Can you please help me
js
@js08

I have a prototype when we click that icon the text box opens..
in the same way in my codebase I am trying to make my test box to close and open...
here instead of icon in css I am using image
i am using the same prototype code in my code base..
but its not working...
I think some problem with the below line div className={icon-search-container ${this.state.active ? 'active' : ''}}>

in my protype code they are rendering at

in my codebase I am not sure where to render -providing both the prototype and my codebase in fiddle
i have even reduced the css but still not able to find out :(
prototype code - working http://codepen.io/tasssik/pen/yeGozR

Not working code http://codepen.io/anon/pen/zrymwq

main code to be fixed

<div className={`icon-search-container ${this.state.active ? 'active' : ''}`}>

<a onClick={this.handleClick} href="javascript:;" className="fa fa-search sportsTopSection-navUtilities-search">
<span className="hidden">Search <abbr>NBA</abbr>.com</span>
</a>

<input type="text" ref='search'className="search-input" placeholder="Search" onBlur={() => this.setState({active: false})}/>

<span className="fa fa-times-circle" onClick={() => this.setState({active: false})}>
</span>

</div>

js
@js08
I am new to react..
i am trying to write a simple menu functionality...
when i click choice A the heading content should be replaced my choice a and show its lists..
similarly when i click choice b the choice a should be replaced by choice b and lsit down its nested list value..
providing my code below...
right now I am able to render the html values but not sure how to proceed.. need help :(
http://codepen.io/anon/pen/wMRVJd
Steve Barbera
@whobutsb
Hello all! I have a quick question about how getStateFromFlux() interacts with getInitialState()
Does getStateFromFlux() overwrite the getInitialState()?
What if I have both methods, in my class? For some reason if i use getStateFromFlux my getInitialState values seem to disappear, even though i'm not setting them in getStateFromFlux
Thanks for the help!
Claire Martinez
@tirams
hey @whobutsb I was just debugging something similar yesterday where I was refactoring some code moving from the component into flux action/store. And I had bothe getStateFromFlux() and getInitialState() in my component. The init was getting the results from both calls and merging them, I think it logged an error if there were any properties that were in both return values.
Andrew Blakey
@ablakey
Is there a clean way to use ES6 classes for actions in Fluxxor? Ie. Binding a class rather than an object? I would love to describe my actions in classes to become more consistent with the rest of the codebase I'm working on.
Andrew Blakey
@ablakey
@js08 I'm not familliar with placing curly braces around a parameter in a component tag. Is that what you mean to do?
js
@js08
@all made progress...but stuck with error need help https://gist.github.com/js08/dfeab2df8b68240297eb
Arthur Schwaiger
@Colmea
Hi ! I'm new to React/Flux/Fluxxor/[insert Flu-Library] and looking for advices. I have complex models class (not especially complex data, but complex methods, nested objects inside them, ...). In my current app, I directly play with these class like this: "var hasIntersections = MyGlobalStore.project.getObjectById('myObject').checkIfIntersects(); if (hasIntersections) MyGlobalStore.project.getObjectById('anotherObject').setIntersection(true);" . That's super easy because all the logic is behind my model objects and I easily fetch child objects in my project. I find the Flux/Fluxxor unidirectional flow really interseting, but I don't see how to handle such complex class (Project, Project.Objects, Project.Object.Transformations, ...) in the store. Do you have some advices ? Everyone told me to forget about "models" and think the Flux way (ie functions in store), but I'm afraid to lost my well-organized-and-full-of-usefull-methods class, and furthermore all the relations between my class models ("Project.getObject('myObject').getTransformation('transformationId')")
texirv0203
@texirv0203
@all need help...I tried but not able to proceed https://gist.github.com/js08/0ec3d70dfda76d7e9fb4
Albert
@holoiii
I'm following the guide for handling async actions here: http://fluxxor.com/guides/async-data.html - what's the best way to make an instance of an api client available to the action? Should I pass it in to the component and then pass it to the action as an argument upon dispatch?
The example in the guide used a global variable to store the client api which was then available to the action creator
But I want to use an instance of an api client which isn't available in the global scope
Albert
@holoiii
Another question - what's a good way to dispatch multiple actions that need to happen one after the other?
ushlepok
@ushlepok

i have fluxxor app with react 0.13 and react router 0.13. i want to update dependencies and use latest react with react-router 2. previously react router had an instance that i could pass to stores like this:

var router = Router.create({
  routes: routes,
  location: Router.HistoryLocation
});

var flux = new Fluxxor.Flux(getStores({router: router}), actions);

but now there is no such instance
i haven't yet understand how to make transitions from stores

ushlepok
@ushlepok
solved this problem %)
friendOfOurs
@friendOfOurs
Is it a good practice / good design principle to have components "communicate" with stores only on the very bottom level? I propagate the flux instance from the root app down through all levels of component hierarchy and have very atomic components speak with e.g. Input. I am asking because I read that the best practice is to have state in the top level and to propagate it down the hierarchy to child components
Arthur Schwaiger
@Colmea
It's not a good practice
Actually, you should keep in mind that the less you "fluxify" a component (listen to store, trigger actions), the more it's reusable in another part of your app
You shouldn't use flux instance in your Input, never
Arthur Schwaiger
@Colmea
The solution is to create smart and dumb components. Dump components are "real" React components, which receive props and display content based on these props. On the opposite, smart components are kind of parent containers that are connected to flux and are responsible to fetch data from store, call actions, and so on.