React: доступ к контексту из магазина Redux - PullRequest
Новая
       121

React: доступ к контексту из магазина Redux

1 голос
/ 21 июня 2020

Я опытный Angular разработчик, который решил изучить React. С этой целью я переписываю одно из своих веб-приложений на React. Я читал о замене Redux на Context API и хук useReducer(), но в моем случае я не думаю, что это было бы хорошей идеей, поскольку мое состояние довольно велико, и у меня еще нет навыка 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>
  )
}

Я хотел бы использовать значение socket из SocketContext в моем хранилище Redux, как в этом asyn c action: 

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

Я получаю подобные ошибки, когда пытаюсь захватить контекст сокета в моем коде магазина:

Необработанное отклонение (ошибка): недопустимый вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента.

Я могу понять, почему это происходит, но я не знаю лучшего способа решить эту проблему. Я мог бы сохранить все преобразователи локально для своих компонентов или передать контекст в качестве параметра в действиях asyn c, но ни один из них не является на самом деле удовлетворительным.

Предложения?

...