0

UPDATE It turned out my whole approach was wrong. As the accepted answer suggests, a good starting point is the TodoMVC app built with React + Flux and hosted on GitHub.

I am building a very small React + Flux app for learning purposes. At the moment it consists only in a login form and in a content (that actually just shows the username). I'm planning to have the application component as the only stateful component in my app, that will send its state to the children as props. But I can't figure out what's the best practice to update the application state from a child (in my case, the input form). I think I can probably bubble it up along the hierarchy, but it really seems a bad practice. Also, should I save the logged in username in the stores?

Here's a basic example of what I mean:

var LoginForm = React.createClass({
    _onSubmit : function(e) {
        e.preventDefault();

        var username = this.refs.username.getDOMNode().value.trim();

        if(!username) return;

        alert(username);

        this.refs.username.getDOMNode().value = "";

        return
    },

    render : function() {
        return (
            <div>
                <form onSubmit={this._onSubmit}>
                    <input
                        type="text"
                        placeholder="Insert username"
                        ref="username"
                    />
                    <button type="submit">Login</button>
                </form>
            </div>
        );
    }
});

var Header = React.createClass({
    render : function() {
        return (
            <div className="header">
                <LoginForm />
            </div>
        );
    }
});

var Content = React.createClass({
    render : function() {
        return (
            <div className="content">Welcome, [username]</div>
        );
    }
});

var MyApp = React.createClass({
    render : function() {
        return (
            <div>
                <Header />
                <Content />
            </div>
        );
    }
});

React.renderComponent(
    <MyApp />,
    document.body
);

I have set up a JSFiddle here with this example, my goal is to substitute [username] with the alerted string.

goffreder
  • 503
  • 3
  • 17
  • Flux could definitely help you here. Looking @ your code though, it doesn't seem like you've give that a shot. Have you tried implementing a store for the user object? – imjared Jan 04 '15 at 01:26

1 Answers1

0

im sorry but i didn't see any flux's architecture in your code yet :) for a high level implementation explanation, assuming you have all 3 basic structure of flux, namely action, dispatcher, and store.

in the _onSubmit in LoginForm component, you should trigger the action to perform the login, and then the event will go through the dispatcher and pass to store.

from the store, it will perform the login (and here you save the [username] information), and then trigger an event (for example change). This event will be registered and listening by the Content component in the componentDidMount. Upon listened the change event, you should able to get the username information from the store. This is a good example for the flux

ChinKang
  • 4,212
  • 2
  • 17
  • 29
  • So I ALWAYS should go through the action -> dispatcher -> store flow, even if I only need to save the data without doing anything with it (yet)? Maybe I'm mixing up React and Flux notions, in Flux it's still a good practice to have one (or few) stateful components or I should just keep everything in the store and then pass props along? – goffreder Jan 04 '15 at 08:07
  • well it is debatable, flux is just an architecture/concept, it claims to be helpful when the web pages have a lot of events firing here and there, and when a lot of components are sharing the same data, `store` will be the best place to keep those data. like u said, u could bubbling up the hierarchy to get the username, but it will be ugly :) – ChinKang Jan 04 '15 at 08:44
  • I replicated the structure and architecture of the TodoMVC example (if you want you can see the outcome [here](http://github.com/goffreder/react-flux-test)), but I feel I had to write A LOT of code to accomplish such a simple behaviour. Probably a lot of that code is just preparation for a simpler work later, but still. Maybe Flux isn't suited for really simple apps, and its usefulness grows along the size of the app... – goffreder Jan 04 '15 at 21:47
  • 1
    Yeah i have the same feeling when i started using the flux. But when the application goes big, you will feel differently, especially when different components would like to get the same data upon an event :) – ChinKang Jan 05 '15 at 01:54