reactjs - 在哪里存储 Class 实例以实现 Redux 中的可重用性？

Question

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

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 对象(它们是带有附加函数的复杂类的实例)，以便我稍后可以再次使用它们来加入房间、订阅事件等。

我的第一个想法是我应该将它存储在 Redux 中，因为那现在是我的“全局存储”，但后来我意识到它可能不起作用，因为它不会是我从存储中返回的原始对象，它可能是一个克隆。然后我读到显然只有普通对象才应该存储在 Redux 中。

那么，那些不是普通对象但需要全局存储的东西在哪里呢？我不想将它们放在窗口对象上，因为我可能会将其转换为 React Native 应用程序，而且无论如何它看起来都很困惑。

Answer 1

根据 Redux FAQ entry on storing "connection"-type objects :

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

• Middleware exist for the lifetime of the application
• Like with the store itself, you probably only need a single instance of a given connection that the whole app can use
• Middleware can see all dispatched actions and dispatch actions themselves. This means a middleware can take dispatched actions and turn those into messages sent over the websocket, and dispatch new actions when a message is received over the websocket.
• A websocket connection instance isn't serializable, so it doesn't belong in the store state itself​

编辑

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

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);
    }
}