useReducer with Context API

Use useReducer in conjunction with React's Context API to manage and distribute complex application state across multiple components.
// State management using useReducer with Context API

// Reducer function to handle state changes based on action type
const initialState = { count: 0 };
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
      throw new Error();

// Create context
const CountContext = React.createContext();

// Context Provider component using useReducer hook
function CountProvider({ children }) {
  const [state, dispatch] = React.useReducer(reducer, initialState);

  return (
    <CountContext.Provider value={{ state, dispatch }}>

// Custom hook to use the context
function useCount() {
  const context = React.useContext(CountContext);
  if (!context) {
    throw new Error('useCount must be used within a CountProvider');
  return context;
The code represents a simple counter application state managed with useReducer and the React Context API. It includes an initial state, a reducer function to manage state changes, a context for passing down state, a provider component which encapsulates the useReducer hook, and a custom hook to consume the context in child components.
// Component that displays the count
function CountDisplay() {
  const { state } = useCount();

  return <div>{state.count}</div>;
This piece of code provides a CountDisplay component, which uses the custom hook useCount to access the count state and then renders it.
// Component that provides buttons to increment or decrement the count
function CounterControls() {
  const { dispatch } = useCount();

  return (
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
This code snippet shows a CounterControls component, which uses the custom hook useCount to dispatch actions for incrementing or decrementing the count state.
// App component that uses CountProvider to wrap the components that need access to the count state
function App() {
  return (
      <CountDisplay />
      <CounterControls />
This is the App component which uses the CountProvider to wrap other components such as CountDisplay and CounterControls, enabling them to access the context state and dispatch actions.