Question

我正在构建一个需要全局可用对象（websocket lib实例）的React / Redux应用程序。我最初试图将它存储在Redux状态树中，但是，实例不是不可变的，并且在开发期间引起了很多热重新加载的问题（从编译代码运行时不存在大量循环引用错误）。

我的问题是如何存储/创建这个实例，以便它可用于我的Redux代码和React组件？我可以在组件树的顶部创建它并将其作为支柱传递到树下，但感觉非常“肮脏”＃34;在使用react-redux连接完成所有操作之后。

有更好的方法吗？

Answer 1

Redux Thunk，由gaeron撰写，他创作了redux，因为2.1.0允许你这样做：

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument(api))
)

// later
function fetchUser(id) {
  return (dispatch, getState, api) => {
    // you can use api here
  }
}

这是直接来自文档，请参阅以下链接以获取更多信息：

https://github.com/gaearon/redux-thunk

Answer 2

如果你正在使用thunk，那么@ sheeldotme的答案会很好用。

还要记住，根据您正在使用的websocket lib，您可能不需要将实例作为全局变量。例如，使用socket.io-client，在进行websocket连接的初始io(url)调用之后，对io(url)的任何后续调用（具有相同的url参数）将返回相同的连接（即socket对象）来自内存，无需重新连接。它可以让您轻松拥有一个简单import / require的API，而不必传递实例或使其全局化。有关详细信息，请参阅socket.io docs。

例如：

socket.js

import io from 'socket.io-client'
const socket = io(`${protocol}//${hostname}:${port}`)
export default socket

现在，您只需import / require socket.js 文件，即可随时随地轻松访问同一个套接字对象。

存储＆＃34;全球＆＃34; React / Redux应用程序中Redux商店外的对象

2 个答案: