如何复用Redux的eventListReducer与eventDetailReducer逻辑？

First off: Yes, you absolutely can create an EventListAndDetailReducer to reuse your existing eventListReducer and eventDetailReducer logic—but it's not the most optimal approach for your specific initial load requirement. Let's walk through both the feasible way to do that, and the better alternatives that align with Redux's design principles.

1. How to Combine Reducers (If You Want To) #

If you go the combined reducer route, don't copy-paste code—instead, treat your existing reducers as "slice reducers" that handle their own state chunks. Here's how that would look:

// Assume you already have these two reducers defined
import eventListReducer from './eventListReducer';
import eventDetailReducer from './eventDetailReducer';

const EventListAndDetailReducer = (state = { listState: {}, detailState: {} }, action) => {
  return {
    // Delegate list-related actions to eventListReducer
    listState: eventListReducer(state.listState, action),
    // Delegate detail-related actions to eventDetailReducer
    detailState: eventDetailReducer(state.detailState, action)
  };
};

This works because Redux reducers are just pure functions—you can call them directly with their respective state slices and the incoming action. That said, this only handles state updates. It doesn't solve the core problem of orchestrating the initial load flow (fetch list first, then fetch first event's detail).

2. The Better Approach: Use Middleware for Async Flow Orchestration #

Your main goal is to run two sequential async actions on page load: fetch the default date range list, then fetch the first event's detail. Reducers should only handle state updates, not async logic. Instead, use Redux Thunk (the most common choice for simple async flows) or Redux Saga (for more complex scenarios) to wrap this sequence—while reusing your existing actions and reducers completely.

Option A: Redux Thunk (Simple & Straightforward) #

Keep your existing reducers and actions, then create a "meta-action" that handles the sequence:

// Your existing fetch actions (assuming they're thunks too)
import { fetchEventList } from './eventListActions';
import { fetchEventDetail } from './eventDetailActions';

// Default date range for initial load
const DEFAULT_START_DATE = '2024-01-01';
const DEFAULT_END_DATE = '2024-01-31';

// Thunk action to orchestrate initial load
export const initializeEventPage = () => async (dispatch, getState) => {
  // Step 1: Fetch the event list with default dates
  await dispatch(fetchEventList({ startDate: DEFAULT_START_DATE, endDate: DEFAULT_END_DATE }));
  
  // Step 2: Grab the first event ID from the updated state
  const { eventList } = getState();
  const firstEventId = eventList.data?.[0]?.id;
  
  // Step 3: If there's an event, fetch its detail
  if (firstEventId) {
    dispatch(fetchEventDetail(firstEventId));
  }
};

Then trigger this in your component's mount lifecycle:

import { useDispatch } from 'react-redux';
import { useEffect } from 'react';
import { initializeEventPage } from './actions';

function EventPage() {
  const dispatch = useDispatch();
  
  useEffect(() => {
    dispatch(initializeEventPage());
  }, [dispatch]);
  
  // Rest of your component logic
}

This approach shines because:

• You reuse 100% of your existing reducer and action logic—no duplicate code
• The async sequence is clear and controlled (wait for list to load before fetching detail)
• Your state stays modular (event list and detail live in separate slices, making them easier to update or debug later)

Option B: Redux Saga (For Complex Async Needs) #

If your app uses Redux Saga (or you anticipate needing more control over async flows—like canceling requests, retries, or parallel calls), you can create a saga to handle the initial load:

import { takeLatest, call, put, select } from 'redux-saga/effects';
import { fetchEventListSaga } from './eventListSagas';
import { fetchEventDetail } from './eventDetailActions';

const DEFAULT_START_DATE = '2024-01-01';
const DEFAULT_END_DATE = '2024-01-31';

function* initializeEventPageSaga() {
  try {
    // Run the list fetch saga
    yield call(fetchEventListSaga, { 
      payload: { startDate: DEFAULT_START_DATE, endDate: DEFAULT_END_DATE } 
    });
    
    // Get the first event ID from the store
    const firstEventId = yield select(state => state.eventList.data?.[0]?.id);
    
    if (firstEventId) {
      // Dispatch the detail fetch action
      yield put(fetchEventDetail(firstEventId));
    }
  } catch (error) {
    console.error('Failed to initialize event page:', error);
    // Handle error state updates here if needed
  }
}

// Listen for an initialize action in your root saga
export function* rootSaga() {
  yield takeLatest('INITIALIZE_EVENT_PAGE', initializeEventPageSaga);
}

Then dispatch the INITIALIZE_EVENT_PAGE action in your component's useEffect just like with Thunk.

3. Final Takeaway #

• Combining reducers works for state update reuse, but it doesn't solve the async orchestration problem you need for initial load.
• Using middleware (Thunk or Saga) is the better choice—it keeps your reducers focused on state updates, reuses all your existing logic, and makes the initial load flow easy to follow and maintain.

内容的提问来源于stack exchange，提问作者Zhuo Shen