Integrating Reducers with Auth State: A Robust Pattern

Previously in this course, we explored Handling Authentication State with React Context API to track user login status. While Context is great for propagation, managing the complex lifecycle of an authentication request—switching between loading, error, and success states—often leads to "boolean soup" in your components.

In this lesson, we are moving beyond simple state toggles. We will use a central reducer to manage the authentication lifecycle, ensuring our application state remains predictable even during asynchronous token operations.

The Problem with Fragmented Auth State

When building an authentication flow, you usually need to track four distinct pieces of information:

1. Is the request currently in flight? (loading)
2. Did the request fail, and if so, what was the error? (error)
3. Is the user authenticated? (isAuthenticated)
4. What is the actual user data or token? (user, token)

If you manage these with individual useState hooks, you risk invalid states—like having loading: true and user: { name: 'John' } simultaneously. By using useReducer, as discussed in Complex State with useReducer, we force these values to transition together as a single, atomic unit.

Implementing the Auth Reducer

We need a reducer that handles specific actions: LOGIN_START, LOGIN_SUCCESS, LOGIN_FAILURE, and LOGOUT. By centralizing this logic, we guarantee that when we start a login, we clear any previous errors and reset the loading state.

JAVASCRIPT
const initialState = {
  user: null,
  token: null,
  isLoading: false,
  error: null,
};

function authReducer(state, action) {
  switch (action.type) {
    case CE9178">'LOGIN_START':
      return { ...state, isLoading: true, error: null };
    case CE9178">'LOGIN_SUCCESS':
      return { 
        ...state, 
        isLoading: false, 
        user: action.payload.user, 
        token: action.payload.token 
      };
    case CE9178">'LOGIN_FAILURE':
      return { ...state, isLoading: false, error: action.payload };
    case CE9178">'LOGOUT':
      return initialState;
    default:
      return state;
  }
}

This structure follows the principles of Managing Object-Based State, ensuring we return a new state object rather than mutating the existing one.

Integrating with the Authentication Flow

Now, let's connect this to our component logic. In a production dashboard, you wouldn't just manage this in a component; you'd likely Architect Global State with Context and Reducer. For now, let's see how the interaction works inside a login handler.

JAVASCRIPT
const LoginForm = () => {
  const [state, dispatch] = useReducer(authReducer, initialState);

  const handleLogin = async (credentials) => {
    dispatch({ type: CE9178">'LOGIN_START' });

    try {
      const response = await api.login(credentials);
      // Assuming response contains { user, token }
      dispatch({ type: CE9178">'LOGIN_SUCCESS', payload: response });
    } catch (err) {
      dispatch({ type: CE9178">'LOGIN_FAILURE', payload: err.message });
    }
  };

  if (state.isLoading) return <Spinner />;
  
  return (
    <form onSubmit={handleLogin}>
      {state.error && <p className="error">{state.error}</p>}
      {/* Inputs go here */}
    </form>
  );
};

Hands-on Exercise

Refactor an existing login component that uses three separate useState hooks (loading, error, user) into a single useReducer.

1. Define the initialState and authReducer as shown above.
2. Replace your useState calls with useReducer.
3. Update your onSubmit handler to dispatch the new action types.
4. Verify that the "loading" spinner correctly disappears when the "success" or "failure" action is dispatched.

Common Pitfalls

• Stale Closures: When performing async operations inside a component, ensure your dispatch doesn't rely on stale state. Since dispatch from useReducer is stable, you don't need to worry about it changing, but always verify your credentials object is current.
• Forgetting to Reset Error State: A classic bug is starting a new login attempt without clearing the previous error message. By including error: null in the LOGIN_START case, we handle this automatically.
• Over-complicating the Reducer: Keep the reducer pure. Do not perform the API call inside the reducer. The reducer only describes how the state changes based on the result of the action.

Recap

By moving from fragmented state to a structured reducer, we've gained:

• Predictability: The state cannot be in an impossible configuration (like loading and success simultaneously).
• Centralization: All logic for login transitions lives in one location, making it easier to debug.
• Maintainability: Adding new states—like TOKEN_EXPIRED—is as simple as adding a new case to the reducer.

This pattern is the backbone of robust authentication systems in React.

Up next: We will begin our journey into navigation by exploring the fundamentals of React Router.