Могу ли я использовать React Context API внутри Context API или мне нужно объединить их?

Question

Мне просто любопытно, можно ли использовать Context API внутри Context API. Как, например, у меня есть API контекста для AppState и я хочу использовать его в другом API контекста, который обрабатывает соединение WebSocket?

Answer 1

Вдохновленный ответом Джозефа, я думаю о том, чтобы просто использовать оба этих контекстных API в пользовательском хуке.

useMultipleContexts(){
  const [contextOne, setContextOne] = useContext(ContextOne);
  const [contextTwo, setContextTwo] = useContext(ContextTwo);

  /**
   * Do something with both contexts
   * in a custom hook that can be used
   * multiple times with the same state
   */


}

Answer 2

Это хороший сценарий использования хуков вместо контекста.

// custom hook
function useAppState() {
  //add handlers here

  return appState;
}

function WebSocket() {
  const appState = useAppState();

  // do something (i.e reconnect) every time appState changes
  useEffect(() => { /* do something */, [appState])
}

function App() {
  return <WebSocket />
}

Answer 3

Позвольте мне объяснить, как использовать два разных контекста одновременно.

Первый шаг: Вам необходимо создать два разных контекста

const AppContext = React.createContext(null);
const SocketContext = React.createContext(null);

Второй шаг: Вам необходимо реализовать свой пользовательский хук.

const UseSharedLogic = () => {
   // your common logic
}

Затем поделиться им с помощью контекстного API.

 <AppContext.Provider value={state}>
        <SocketContext.Provider value={UseSharedLogic}>
          <App />
        </DispatchContext.Provider>
      </StateContext.Provider>

Третий шаг: Вы должны использовать эти контексты в компоненте, который вам нужен, чтобы использовать их внутри него.

const state = React.useContext(AppContext);
const socket = React.useContext(SocketContext);

Здесь вы можете использовать оба контекста вместе, и вы используете одно значение из одного контекста в другом.

Давайте предположим, что у контекста сокета есть функция connect, и это зависит от значения из контекста приложения, вы можете сделать что-то вроде этого.

socket.connect(state.anyValue);