How do I use useContext and useReducer in React?

Can you explain how to use useContext and useReducer together in a React application?

Sure! useContext allows you to share state across components without prop drilling, while useReducer is great for managing complex state logic.

How do I set up a context provider with useReducer?

First, create a context using React.createContext(). Then, set up a reducer function and use useReducer in your provider component.

Can you give me a code example?

Absolutely! Here's a simple example:

const MyContext = React.createContext();

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

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

This sets up a context provider with a reducer!

How do I consume this context in a child component?

You can use useContext to access the context in your child component like this:

const { state, dispatch } = useContext(MyContext);

This gives you access to the state and dispatch function!