Use useReducer and contextAPI for state management

 

Use useReducer and Context API together for state management in React. They complement each other well, providing a powerful and flexible approach to managing shared state across components.

Here's how they work together:

Create a Context:

Use createContext to create a new context object.

This context will hold the shared state and the dispatch function.

Provider Component:

Wrap the components that need access to the shared state with the Provider component from the created context.

Pass the initial state and the reducer function as props to the Provider.

Consumer Components:

Use the useContext hook within the components that need to access the shared state.

This hook will return the current state and the dispatch function.

Sample Code

Creating a Shared Counter Using useReducer and Context API

1. Create Context File (CounterContext.js)

import { createContext } from 'react';

const CounterContext = createContext();

export default CounterContext;

2. Create Reducer File (counterReducer.js)

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

3. Create Provider Component (CounterProvider.js)

import React, { useReducer } from 'react';
import CounterContext from './CounterContext';
import { counterReducer } from './counterReducer';

const CounterProvider = ({ children }) => {
  const [count, dispatch] = useReducer(counterReducer, 0);

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

export default CounterProvider;

4. Create Consumer Component (Counter.js)

import React, { useContext } from 'react';
import CounterContext from './CounterContext';

const Counter = () => {
  const { count, dispatch } = useContext(CounterContext);

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

export default Counter;

5. Use the Provider and Consumer in Your App

import React from 'react';
import CounterProvider from './CounterProvider';
import Counter from './Counter';

function App() {
  return (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  );
}

export default App;

Explanation:

• The CounterContext is created to hold the shared state and dispatch function.
• The counterReducer handles the logic for updating the count.
• The CounterProvider wraps the application and provides the context value to its children.
• The Counter component consumes the context and uses the count and dispatch values to update and display the counter.

This structure promotes code organization, reusability, and maintainability, making it easier to manage shared state in your React applications.