Redux dispatch多次触发问题求助（React/Redux+redux-thunk）

Hey there, let's troubleshoot that duplicate dispatch issue you're facing with Redux + redux-thunk! This is a super common gotcha, so let's walk through the most likely causes and fixes to get your app behaving as expected.

1. Your Reducer Is Accumulating Data Instead of Replacing It #

The first thing to check is your reducer logic. If you're appending new data to the existing array in state instead of replacing it with the fresh payload, it'll look like the action is dispatching twice—when really, your state is just holding onto old data plus new data.

Wrong Example: #

// This will add new data to the existing array every time
case 'FETCH_ADDITIONAL_DATA_SUCCESS':
  return {
    ...state,
    additionalData: [...state.additionalData, ...action.payload]
  };

Correct Example (if you want fresh data each click): #

// Replace the old array entirely with the new payload
case 'FETCH_ADDITIONAL_DATA_SUCCESS':
  return {
    ...state,
    additionalData: action.payload
  };

2. Uncancelled Async Operations in Your Thunk #

If your thunk makes an async request (like a fetch or axios call) and you don't cancel the previous request when the user clicks again, both the old and new requests might resolve, leading to two dispatches.

Fix with Axios Cancel Tokens: #

let activeCancelToken;

export const fetchAdditionalData = () => async (dispatch) => {
  // Cancel any ongoing request before starting a new one
  if (activeCancelToken) {
    activeCancelToken.cancel('Cancelled previous request for new click');
  }
  activeCancelToken = axios.CancelToken.source();

  try {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    const res = await axios.get('/your-api-endpoint', {
      cancelToken: activeCancelToken.token
    });
    dispatch({ type: 'FETCH_ADDITIONAL_DATA_SUCCESS', payload: res.data });
  } catch (err) {
    // Ignore cancellation errors
    if (!axios.isCancel(err)) {
      dispatch({ type: 'FETCH_DATA_FAILURE', payload: err.message });
    }
  }
};

3. Duplicate Event Listeners in Your Component #

If you're manually adding event listeners (instead of using React's built-in onClick), or your useEffect hook has incorrect dependencies, you might be binding the click handler multiple times—leading to multiple dispatches per click.

Wrong Example: #

// This re-adds the listener every time the component renders
useEffect(() => {
  const btn = document.getElementById('fetch-btn');
  btn.addEventListener('click', handleFetchClick);
  return () => btn.removeEventListener('click', handleFetchClick);
}); // No dependency array = runs on every render

Correct Fixes: #

Either use React's native onClick (preferred):

<button onClick={handleFetchClick}>Load Additional Data</button>

Or fix your useEffect with a proper dependency array:

useEffect(() => {
  const btn = document.getElementById('fetch-btn');
  btn.addEventListener('click', handleFetchClick);
  return () => btn.removeEventListener('click', handleFetchClick);
}, []); // Empty array = runs once on mount

4. Duplicate Middleware/Store Initialization #

Double-check your Redux store setup—if you accidentally apply the redux-thunk middleware multiple times, or recreate the store on every render, it can cause dispatch to fire multiple times.

Wrong Example: #

// Oops, added thunk twice!
const store = createStore(
  rootReducer,
  applyMiddleware(thunk, thunk)
);

Correct Example: #

const store = createStore(
  rootReducer,
  applyMiddleware(thunk) // Only apply once!
);

Start with checking the reducer first—it's the most common culprit here. If that's not it, move down the list and you should find the issue.

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