Question

如何将某些操作数据发送到多个商店？

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

所以这是一个简单的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 arcitecture中的多个商店？

1 个答案: