在 React/Redux 应用程序的 Redux 存储之外存储“全局”对象答案

【问题标题】：Storing "global" object outside of Redux store in React/Redux app在 React/Redux 应用程序的 Redux 存储之外存储“全局”对象
【发布时间】：2016-09-10 08:25:55
【问题描述】：

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

我的问题是如何存储/创建这个实例，以便我的 Redux 代码和 React 组件可以使用它？我可以在组件树的最顶端创建它并将它作为道具传递到树中，但是在使用 react-redux connect 完成所有操作后感觉非常“脏”。

有没有更好的方法来做到这一点？

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

如果您使用 thunk，@sheeldotme 的回答会很有效。

另外请记住，根据您使用的 websocket 库，您可能不需要将实例作为全局变量。例如，对于socket.io-client，在您最初的io(url) 调用建立websocket 连接之后，任何后续对io(url) 的调用（具有相同的url 参数）将返回相同的连接（即socket 对象）内存，无需重新连接。它使您可以轻松地拥有一个 API，您可以简单地 import/require，而不必传递实例或使其成为全局实例。请参阅socket.io docs 了解更多信息。

例如：

socket.js

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

现在您只需 import/require 您的 socket.js 文件即可轻松地从任何地方访问同一个套接字对象。

【讨论】：

【解决方案2】：

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

【讨论】：