在哪里存储类实例以在 Redux 中重用? [英] Where to store Class instance for reusability in Redux?

问题描述

我正在尝试在我的 React/Redux/redux saga 应用程序中通过 Pusher 实现一个消息传递库 Chatkit，我是 Redux 的新手.连接到 chatkit 的代码如下所示:

I am trying to implement a messaging library Chatkit by Pusher in my React/Redux/redux saga app and I'm new to Redux. The code for connecting to chatkit looks like this:

const chatManager = new ChatManager({
    instanceLocator: 'v1:us1:80215247-1df3-4956-8ba8-9744ffd12161',
    userId: 'sarah',
    tokenProvider: new TokenProvider({ url: 'your.auth.url' })
})

chatManager.connect()
    .then(currentUser => {
        console.log('Successful connection', currentUser)
    })
    .catch(err => {
        console.log('Error on connection', err)
    })

我需要全局存储 chatManager 和 currentUser 对象(它们是带有附加函数的复杂类的实例)，以便我以后可以再次使用它们来加入房间、订阅事件等.

I need to store the chatManager and currentUser objects, (which are instances of complex classes with functions atttached) globally so that I can use them again later to join rooms, subscribe to events etc.

我的第一个想法是我应该将它存储在 Redux 中，因为它现在是我的全局存储"，但后来我意识到它可能无法工作，因为它不是我从存储中取回的原始对象，它大概是一个克隆.然后我读到，显然只有普通对象应该存储在 Redux 中.

My first thought was that I should store it in Redux as that's now my "global store" but I then realised that it probably won't work as it won't be the original object I get back out of the store, it'll presumably a clone. I then read that apparently only plain objects are supposed to be stored in Redux.

那么，不是普通对象但需要全局存储的东西在哪里?我不想将它们放在 window 对象上，因为我可能会将其转换为 React Native 应用程序，但无论如何它看起来很混乱.

So, where are things that aren't plain objects but do need to be stored globally? I don't want to put them on the window object as I may convert this to a React Native app and it seems messy anyway.

推荐答案

根据 关于存储连接"类型对象的 Redux FAQ 条目:

中间件是 Redux 应用程序中 websockets 等持久连接的正确位置，原因如下:

Middleware are the right place for persistent connections like websockets in a Redux app, for several reasons:

• 中间件存在于应用程序的整个生命周期
• 与商店本身一样，您可能只需要整个应用程序都可以使用的给定连接的单个实例
• 中间件可以看到所有分派的动作和自己分派的动作.这意味着中间件可以执行已分派的操作并将其转换为通过 websocket 发送的消息，并在通过 websocket 接收到消息时分派新的操作.
• websocket 连接实例不可序列化，因此它不属于商店状态本身

编辑

这是我的示例套接字中间件"示例，更新为延迟创建套接字，直到它看到登录操作:

Here's my "sample socket middleware" example, updated to delay creating the socket until it sees a login action:

const createMySocketMiddleware = (url) => {
    let socket;

    return storeAPI => next => action => {
        switch(action.type) {
            case "LOGIN" : {
                socket = createMyWebsocket(url);

                socket.on("message", (message) => {
                    storeAPI.dispatch({
                        type : "SOCKET_MESSAGE_RECEIVED",
                        payload : message
                    });
                });
                break;
            }
            case "SEND_WEBSOCKET_MESSAGE": {
                socket.send(action.payload);
                return;
            }
        }

        return next(action);
    }
}

这篇关于在哪里存储类实例以在 Redux 中重用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！