react + flux 数据应该怎么放？
发布于 9 年前 作者 louis-sherren 5684 次浏览 最后一次编辑是 8 年前 来自 问答

目前在用react + flux 写一个应用，不过对于数据存放的地点有一些疑问。 Flux推荐将数据存储在Store中，然后通过emit change event的方式去通知监听store的组建rerender，所以需要rerender的组建都需要牵扯某个到某个store，这样给我的感觉是显得不够组建化，因为某些时候可能希望一个组建就仅仅只有一个jsx文件。 目前我的做法是将组建中业务相关的数据放在store中，比如官方todolist demo中的todos；而将某些纯展现相关的数据直接放在jsx中，作为组建的属性，比如一个tab groups组建中active tab的标记。 不知道这种做法是否正确，求解答求拍砖

14 回复

如果用 flux 是为了把组件串起来做web app，放在 store 里不错，共享数据。 如果是用多个小组件搭个大的组件，还是不用 flux 的好。

reflux 不知道对你有用不

@leapon 如果两者结合呢？就是想用flux，又会有那种复用很多的小组建

相互独立的组件之间通信怎么做?

@leapon

A B两个组件， 比如A是一个省市县的多级树形组件，显示界面比较复杂， B是一个是form输入组件， 现在想实现通过form输入 来动态添加省市县的功能 这个是应该把B当做A的子组件，还是应该两个组件通过store共享数据，然后用添加，修改，删除用flex事件通知？

@yakczh 这个肯定是把数据放在store store通过触发change事件去通知各个组建更新才对吧

@yakczh 你的这个例子里，A B 组件功能相对独立，我倾向于按两个独立的组件处理。我的假设是，如果 A ＋ B 成为一个组件，在UI中再次使用这个组件的可能也不大。

@louis-sherren 我的 React component 支持两种消息发布，event listener binding 和 flux message dispatch。这样两方面都照顾到了。

@leapon 有没有简单的示例?

@yakczh

执行事件传递的函数

if flux dispatcher is avaiable, use it to disptach event if listener is registered, call listener functions

    // values is an array of arguments
    fire: function(eventName, values) {
        // use flux dispatch if this.dispatcher is available
        this.dispatch({
            actionType: eventName,
            content: values
        });
        // check listenerCol for invoke registered listeners
        if (!this.listenerCol[eventName]) {
            return;
        }
        var callbacks = this.listenerCol[eventName];
        for (var i = 0; i < callbacks.length; i++) {
            callbacks[i].apply(null, values);
        }
    },
    
    dispatch: function(payload) {
        // use flux dispatch if this.dispatcher is available
        if (this.state.dispatcher) {
            this.state.dispatcher.dispatch(payload);
        }
    },
	```

把 dispatcher 传给 React Component:

var React = require('react');
var Dispatcher = require('flux').Dispatcher;
var Treeview = require('treeview');

app.dispatcher = new Dispatcher();

app.tree1Data = {
    dispatcher: app.dispatcher,
    expandLevel: 3,
	...

在 React component 里，激发事件

        if (isNodeClickEvent) {
            var node = {
                tree: this.state.name,
                key: nodeKey,
                type: cellType,
                cellId: cellId,
                item: treedataItem
            };
            // fire evernt on node click
            this.fire('treenode-click', [node]);
            // set active node
            this.setActiveItem(treedataItem);
        }

@leapon 这样会不会比较乱，同一个事件会导致component arerender两次吗？

@louis-sherren component 的使用者可以选择用哪个方式。组件开发用 listener，web app 开发用 dispatcher。

如果用户非要同时用两个方式，那是用户选择。

〉同一个事件会导致component arerender两次吗

不会，理由同上。除非用户作。

回到顶部