Как я могу эффективно использовать React Context API

Если вас беспокоит проблема, заключающаяся в том, что у вас много поставщиков контекста, вы можете избежать ее, переместив свою логику в редюсеры (useReducer) и используя единственный Context Provider, чтобы поделиться состоянием вашего редюсера и отправить его действие вниз в дерево компонентов.

Хорошей практикой в ​​отношении вашего вопроса является создание нескольких редукторов для каждой вашей логической единицы/цели, и благодаря этому подходу вы будете следовать шаблону единой ответственности, и эти редукторы будет легче поддерживать.

Затем вы можете объединить свои редукторы в один для централизованного источника истины и использовать это rootReducer в контексте, чтобы сделать состояние и отправку доступными для детей.
В этом случае у вас будет только один поставщик контекста, но он может содержать несколько редукторов, и каждый редуктор будет отвечать за свою собственную цель, поэтому вы получите свою функциональность без множества поставщиков контекста.

Вот пример кода:

счетчик.редуктор

export const initialCounterState = { count: 0 };

export function counterReducer(state = initialCounterState, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

тема.редуктор

export const initialThemeState = { theme: "light" };

export function themeReducer(state = initialThemeState, action) {
  switch (action.type) {
    case "TOGGLE_THEME":
      return { theme: state.theme === "light" ? "dark" : "light" };
    default:
      return state;
  }
}

root.reducer, где несколько редукторов объединены вместе

import { counterReducer, initialCounterState } from "./counter.reducer";
import { themeReducer, initialThemeState } from "./theme.reducer";

export function rootReducer(state, action) {
  return {
    counter: counterReducer(state.counter, action),
    theme: themeReducer(state.theme, action)
  };
}

export const initialRootState = {
  counter: initialCounterState,
  theme: initialThemeState
};

AppContext, который будет использовать ваш корневой редуктор, чтобы сделать его доступным для детей:

import React, { createContext, useReducer, useContext } from "react";
import { rootReducer, initialRootState } from "./reducers/index";

const AppCtx = createContext();

export function AppProvider({ children }) {
  const [state, dispatch] = useReducer(rootReducer, initialRootState);

  return (
    <AppCtx.Provider value = {{ state, dispatch }}>{children}</AppCtx.Provider>
  );
}

export function useAppContext() {
  const ctx = useContext(AppCtx);
  if (!ctx) {
    throw new Error("useAppContext must be used within a AppProvider");
  }
  return ctx;
}

import React from "react";
import { useAppContext } from "./AppContext";

const Counter = () => {
  const { state, dispatch } = useAppContext();
  const { count } = state.counter;

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick = {() => dispatch({ type: "INCREMENT" })}>Increment</button>
      <button onClick = {() => dispatch({ type: "DECREMENT" })}>Decrement</button>
    </div>
  );
};

export default Counter;

Переключатель тем

import React from "react";
import { useAppContext } from "./AppContext";

const ThemeSwitcher = () => {
  const { state, dispatch } = useAppContext();
  const { theme } = state.theme;

  return (
    <div>
      <h1>Current Theme: {theme}</h1>
      <button onClick = {() => dispatch({ type: "TOGGLE_THEME" })}>
        Toggle Theme
      </button>
    </div>
  );
};

export default ThemeSwitcher;

И не забудьте обернуть дочерние компоненты в поставщика контекста:

import React from "react";

import { AppProvider } from "./AppContext";
import Counter from "./Counter";
import ThemeSwitcher from "./ThemeSwitcher";

const App = () => {
  return (
      <AppProvider>
        <Counter />
        <ThemeSwitcher />
      </AppProvider>
  );
};

export default App;

Вот живой пример, который я сделал для этой цели.

пример песочницы