Redux中请求状态的优雅处理方案及性能疑问咨询

Great question! Your current approach of centralizing loading states in a loadingTasks reducer is already a solid step towards cutting down boilerplate—let's break down answers to your two questions.

1. Are there better approaches for managing Redux fetching states? #

Your centralized loadingTasks setup is totally valid and clean, but there are a few alternative (and often complementary) approaches to consider based on your app's needs:

a. Use Redux Toolkit's built-in async utilities #

Redux Toolkit (the official recommended way to write Redux) simplifies async state management drastically with createAsyncThunk and createSlice. It auto-generates pending/fulfilled/rejected action types for your async calls, so you don’t need to manually dispatch startLoadingTask or endLoadingTask.

Example implementation:

// todosSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import api from './api';

// Async thunk for fetching todos
export const fetchTodos = createAsyncThunk(
  'todos/fetchTodos',
  async () => {
    const response = await api.getTodos();
    return response.data;
  }
);

const todosSlice = createSlice({
  name: 'todos',
  initialState: {
    items: [],
    isFetching: false,
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (state) => {
        state.isFetching = true;
      })
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.isFetching = false;
        state.items = action.payload;
      })
      .addCase(fetchTodos.rejected, (state) => {
        state.isFetching = false;
        state.error = 'Failed to fetch todos';
      });
  }
});

export default todosSlice.reducer;

This keeps loading states co-located with their related data (todos' loading state lives in the todos slice), making your state structure more intuitive and reducing cross-slice dependencies.

b. Automate loading state updates with custom middleware #

If you prefer centralized loading state, build a Redux middleware that auto-tracks async actions. For example, tag async actions with a meta.loadingTask property—your middleware can then dispatch START_LOADING_TASK when the action starts, and END_LOADING_TASK when it succeeds/fails. This eliminates the need to manually call loading actions in every async action creator.

c. Combine centralized and feature-specific loading states #

You don’t have to pick one model! For example:

• Keep feature-specific loading states (like todos.isFetching) in their slices for component-specific needs.
• Maintain a centralized loadingTasks object for cross-feature use cases (e.g., showing a global spinner when any async task is in progress).

2. Will many components subscribing to loadingTasks cause performance issues? #

It depends on how components access the loadingTasks state:

The potential pitfall #

Every time any property in loadingTasks changes (e.g., isUserFetching flips to true), the reducer returns a new object (thanks to Object.assign). If a component subscribes to the entire loadingTasks object instead of a specific property, React will see this as a new prop and trigger a re-render—even if the component only cares about an unrelated property like isTodosFetching.

How to avoid performance hits #

• Select only the specific loading state your component needs in mapStateToProps:

  // Good: Only subscribe to the relevant property
  const mapStateToProps = (state) => ({
    isTodosFetching: state.loadingTasks.isTodosFetching
  });
  

  This way, only changes to isTodosFetching will trigger a re-render for this component.

• Use memoized selectors with Reselect (built into Redux Toolkit):
  Memoized selectors cache their results, so they only return a new value when the specific state they depend on changes. Example:

  import { createSelector } from '@reduxjs/toolkit';
  
  const selectLoadingTasks = (state) => state.loadingTasks;
  export const selectIsTodosFetching = createSelector(
    [selectLoadingTasks],
    (loadingTasks) => loadingTasks.isTodosFetching
  );
  
  // In your component:
  const mapStateToProps = (state) => ({
    isTodosFetching: selectIsTodosFetching(state)
  });
  

  This ensures that even if other parts of loadingTasks change, the selector returns the cached value for isTodosFetching unless that specific property updates.

Final note #

If you follow these practices, subscribing many components to loadingTasks won’t cause meaningful performance issues. Redux’s subscription model is efficient, and React’s re-render checks (especially with memoization) will prevent unnecessary updates.

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