React flux 架构如何通过一个动作将数据传播到多个商店？

Question

如何把一些动作数据传到很多店铺？

例如，我在用户操作中从服务器获取了一些 post 数据。

所以这是简单的 psudo 操作代码。

class UserActions {
    getPosts() {
        asyncFetch(apiEndPoint, function(data) {
            /*
             * data : {
             *    PostStore : [ ... ],
             *    UserStore : { ... },
             *    CommentStore : [ ... ],
             *    AppDataStore : { ... },
             *    StatusDataStore : { ... },
             *    ...
             * }
             *
             */

             PostActions.receiveStoreData(data.PostStore);
             UserActions.receiveStoreData(data.UserStore);
             CommentActions.receiveStoreData(data.CommentStore);
             AppDataActions.receiveStoreData(data.AppDataStore);
             StatusActions.receiveStoreData(data.StatusDataStore);
             ...
        }
    }
}

我很好奇将许多商店数据设置到每个商店调用操作中的操作。

如何使用最佳实践修复它？

Answer 1

您的动作创建者应该使用调度程序来调度相应的动作，如下所示：

import { Dispatcher } from 'flux';

class UserActions {
    getPosts() {
        asyncFetch(apiEndPoint, function(data) {
            const action = {
                type: 'ADD_POSTS',
                data
            };

            Dispatcher.dispatch(action);
        }
    }

    // ...
}

然后一个或多个商店可以注册到调度程序并收听相同的 ADD_POSTS 操作：

import { EventEmitter } from 'events';

let posts = [];

const PostStore = Object.assign({}, EventEmitter.prototype, {
    dispatcherIndex: AppDispatcher.register(action => {
        const { type, data } = action;

        switch (type) {
            case 'ADD_POSTS':
                posts = posts.concat(data);
                PostStore.emitChange();
            break;
            // ...
        }

        return true;
    });

    emitChange() {
        this.emit('change');
    }

    // ...
});

React flux 架构如何通过一个动作将数据传播到多个商店？

How to spread data with one action to many stores in React flux arcitecture?

javascript

flux

node.js

reactjs