Question

我是一位经验丰富的Angular开发人员，他现在决定学习React。为此，我正在React中重写我的一个Web应用程序。我一直在阅读有关使用Context API和useReducer()钩子替换Redux的信息，但是对于我来说，这不是一个好主意，因为我的状态非常大并且还没有React减轻可能出现的性能问题的技能。

所以我决定继续使用Redux。

我现在遇到的问题是，我的Redux商店中需要使用上下文。我的SocketProvider看起来像这样：

export const SocketProvider = ({
                                 children,
                                 endpoint
                               }) => {
  const [socket, setSocket] = useState();
  const [connected, setConnected] = useState(false);

  useEffect(() => {
    // set socket and init
  }, [isAuthenticated]);

  return (
    <SocketContext.Provider
      value={{
        socket,
        connected
      }}
    >
      {children}
    </SocketContext.Provider>
  )
}

我想在Redux存储中使用socket中的SocketContext值，就像在此异步操作中一样：

export const fetchComments = (issue: Issue): AppThunk => async dispatch => {
  try {
    dispatch(getCommentsStart())
    const comments = socket.emit('getComment', issue.comments_url) // how can I get this socket?
    dispatch(getCommentsSuccess({ issueId: issue.number, comments }))
  } catch (err) {
    dispatch(getCommentsFailure(err))
  }
}

const App = () => {
  return (
    <SocketProvider endpoint={process.env.REACT_APP_API_SOCKET_ENDPOINT}>
      <Provider store={store}>
        { /* my components */}
      </Provider>
    </SocketProvider>
  );
}

当我尝试在商店代码中获取套接字上下文时，会收到如下错误：

未处理的拒绝（错误）：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。

我可以理解为什么会这样，但是我不知道解决它的最佳方法。我可以将所有thunk保留在组件的本地，或者在异步操作中将上下文作为参数传递，但这些都不是令人满意的。

建议？

反应：从Redux存储中访问上下文

0 个答案: