在 React + Flux 中从 child 更新应用程序状态

Question

UPDATE 结果证明我的整个方法都是错误的。正如公认的答案所暗示的那样，一个好的起点是使用 React + Flux 构建并托管在 GitHub.

上的 TodoMVC 应用程序

我正在构建一个非常小的 React + Flux 应用程序用于学习目的。目前它只包含一个登录表单和一个内容（实际上只显示用户名）。我计划将应用程序组件作为我的应用程序中唯一的有状态组件，它将其状态作为道具发送到 children。但是我无法弄清楚从 child （在我的例子中是输入表单）更新应用程序状态的最佳做法是什么。我想我可能可以沿着层次结构向上冒泡，但这似乎确实是一种不好的做法。另外，我应该在商店中保存登录的用户名吗？

这是我的意思的一个基本示例：

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
);

我已经用这个例子设置了一个 JSFiddle here，我的目标是用提示的字符串替换 [username]。

Answer 1

抱歉，我还没有在您的代码中看到任何通量架构 :) 对于高级实现解释，假设您拥有通量的所有 3 种基本结构，即 action、dispatcher，以及 store。

在_onSubmit in LoginForm组件中，你应该触发action执行登录，然后事件会通过dispatcher传递给store.

从store开始，它会执行登录（这里保存了[username]的信息），然后触发一个事件（比如change）。该事件将由 componentDidMount 中的 Content 组件注册和监听。侦听 change 事件后，您应该能够从商店获取 username 信息。这是通量

的 good example

在 React + Flux 中从 child 更新应用程序状态

Update application state from child in React + Flux

javascript

reactjs

reactjs-flux