在React JS中,何时应该使用商店vs直接操纵视图的状态？

Question

现在我理解商店的概念作为React应用程序的真实来源,但似乎有时使用商店是过度的,特别是在仅限UI的情况下.

例如,假设我正在制作一个包含电影列表的应用.该应用程序包含一个搜索栏,可让您根据标题过滤这些电影.该搜索栏的值(让我们称之为searchTerm)是否应该包含在商店中？它唯一的影响是显示的电影列表,这纯粹是一个UI功能.它不会被发送到服务器或保存到本地存储.所以在我的handleTextChange函数中,我应该提醒商店,还是只设置组件的状态:

应该这样(使用商店):

var Actions = Reflux.createActions([
    "searchChanged"
]);

var Store = Reflux.createStore({
    listenables: [Actions],
    getInitialState: function () {
        return data;
    },
    onSearchChanged: function (searchTerm) {
        this.trigger(data.filter(function (el) {
            return el.name.toLowerCase().indexOf(searchTerm.toLowerCase()) != -1;
        }));
    }
});

var View = React.createClass({
    mixins: [Reflux.connect(Store, "movies")],
    handleTextChange: function (e) {
        Actions.searchChanged(e.target.value);
    },
    render: function(){
        //Render here. Somewhere there is this input element:
        <input onChange={this.handleTextChange} type="text"/>
    }
)};

或者这个(不使用商店):

var Store = Reflux.createStore({
    getInitialState: function () {
        return data;
    },
});
var View = React.createClass({
    mixins: [Reflux.connect(Store, "movies")],
    handleTextChange: function (e) {
        this.setState({searchTerm: e.target.value});
    },
    render: function(){
        var filtered = this.movies.filter(function (el) {
            return el.name.toLowerCase().indexOf(this.state.searchTerm.toLowerCase()) != -1;
        });

        //Render here using the filtered variable. Somewhere there is this input element:
        <input onChange={this.handleTextChange} type="text"/>
    }
}

后一个例子显然更简单.是否有充分的理由使用商店来过滤数据？或者视图是否有searchTerm变量并在render()函数中执行过滤？

Answer 1

正如您的示例所示,不使用商店更简单,在这种情况下可以说是正确的.

一个很难回答的问题是:

是否有其他组件需要了解搜索结果？

一个更好的问题是:

其他一些组件可能需要了解搜索结果吗？

考虑一下,如果您通过结果添加分页,或者甚至是"找到12个结果"的简单标题,那么这些组件需要知道结果并需要从商店中获取结果.或者您可能想要添加路由器并让搜索更新网址和网址更改以驱动应用.

如果你可以肯定地说只有子组件会关心一个值,那么状态就可以了.