在React/Redux应用程序中将"全局"对象存储在Redux存储之外

Question

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

我的问题是如何存储/创建此实例,以便它可用于我的Redux代码和React组件？我可以在组件树的最顶部创建它并将其作为prop传递给树,但在使用react-redux connect完成所有操作后感觉非常"脏".

有一个更好的方法吗？

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在进行io(url)websocket连接的初始调用之后,对io(url)(使用相同url参数)的任何后续调用socket将从内存返回相同的连接(即对象),而不必重新连接.它可以很容易有一个API,你可以简单地import/ require,而不必通过周围的实例或使其全球.有关详细信息,请参阅socket.io文档.

例如:

socket.js

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

现在您可以简单地import/ require您的socket.js文件,从任何地方轻松访问相同的套接字对象.