在Redux中将Class实例存储在何处以便可重用?

jon*_*bbs 4 reactjs redux redux-saga

我正在尝试在我的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)
    })
Run Code Online (Sandbox Code Playgroud)

我需要全局存储chatManager和currentUser对象(它们是具有功能的复杂类的实例),以便以后可以再次使用它们来加入房间,订阅事件等。

我最初的想法是我应该将其存储在Redux中,因为它现在是我的“全局存储”,但后来我意识到它可能无法工作,因为它不是我从存储中取出的原始对象,它将大概是一个克隆。然后我读到,显然只有普通对象应该存储在Redux中。

那么,那些不是普通对象但需要全局存储的对象又在哪里呢?我不想将它们放在window对象上,因为我可能会将其转换为React Native应用程序,而且看起来还是很混乱。

mar*_*son 11

根据有关存储“连接”类型对象Redux FAQ条目

出于以下几个原因,中间件是Redux应用程序中诸如websockets之类的持久连接的正确地方:

  • 在应用程序的生命周期中存在中间件
  • 与商店本身一样,您可能只需要一个给定连接的单个实例,整个应用程序就可以使用该实例
  • 中间件可以查看所有已调度的动作,也可以自己查看调度的动作。这意味着中间件可以采取调度的动作,并将其转换为通过websocket发送的消息,并在通过websocket接收消息时调度新的动作。
  • Websocket连接实例不可序列化,因此它不属于存储状态本身吗?

编辑

这是我的“示例套接字中间件”示例,经过更新以延迟创建套接字,直到看到登录操作为止:

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);
    }
}
Run Code Online (Sandbox Code Playgroud)

  • FAQ条目链接到[我编写的示例套接字中间件](https://gist.github.com/markerikson/3df1cf5abbac57820a20059287b4be58),以及其他“真实”的链接。除了[Redux docs中的“中间件”页面](https://redux.js.org/advanced/middleware),我的[Redux基础知识研讨会幻灯片也有一节有关编写中间件的内容](https://blog.isquaredsoftware .com / 2018/06 / redux-fundamentals-workshop-slides /),而我[在此处链接到有关中间件的更多文章](https://github.com/markerikson/react-redux-links/blob/master/ redux-middleware.md)。 (2认同)