How can I use useReducer with Context API in React?

How can I use useReducer with Context API in React?

You can use the useReducer hook to manage complex state in your React application, and combine it with the Context API to provide that state globally. Would you like a code example?

Yes, please provide a code example.

Sure! Here's a simple example:

import React, { createContext, useReducer, useContext } from 'react';

const initialState = { count: 0 };
const CounterContext = createContext();

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

export const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
};

export const useCounter = () => useContext(CounterContext);

This sets up a context provider for a counter state.

How do I use the context in a component?

You can use the useCounter hook in any component wrapped by the CounterProvider. Here's an example:

import React from 'react';
import { useCounter } from './CounterContext';

const Counter = () => {
  const { state, dispatch } = useCounter();

  return (
    <div>
      <h1>Count: {state.count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

This component will display the count and allow you to increment or decrement it.