在 React/Redux 应用中将 "global" 对象存储在 Redux 存储之外

Question

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

我的问题是如何 store/create 这个实例，以便我的 Redux 代码和 React 组件可以使用它？我可以在组件树的最顶部创建它并将它作为 prop 传递到树下，但是在使用 react-redux connect 完成所有操作后感觉非常 "dirty"。

有更好的方法吗？

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

这是直接来自文档，请参阅下面的 link 了解更多信息：

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

Answer 2

@sheeldotme 的回答在您使用 thunk 时会很有效。

另请记住，根据您使用的 websocket 库，您可能不需要将该实例作为全局变量。例如，对于 socket.io-client，在您建立 websocket 连接的初始 io(url) 调用之后，对 io(url) 的任何后续调用（使用相同的 url 参数）将 return 来自内存的相同连接（即 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 文件即可从任何地方轻松访问同一个套接字对象。

在 React/Redux 应用中将 "global" 对象存储在 Redux 存储之外

Storing "global" object outside of Redux store in React/Redux app

reactjs

redux

react-redux