Redux异步函数工作原理及Reducer中异步数据获取实现

Hey there! Let's untangle this confusion step by step—async in Redux trips up a lot of folks at first, but once you get the pattern, it clicks.

First: Why You Can't Call Async Functions Directly in a Reducer #

Let's start with a critical rule: Redux reducers must be pure, synchronous functions. That means:

• They can't have side effects (like API calls, which are asynchronous and depend on external systems)
• Their return value only depends on the current state and the incoming action
• They can't modify the original state—they have to return a new state object

So trying to call axios.get() or fetch() directly inside your reducer is a no-go. That's not what reducers are designed for.

Why Official Examples Don't Always Use async/await #

The official Redux async examples use Redux Thunk middleware, which lets you write action creators that return functions instead of plain objects. Those examples might use Promise.then() instead of async/await, but it's just syntax—async/await is just sugar over Promises. Both approaches do the same thing: handle async logic outside the reducer, then dispatch regular synchronous actions once the async work finishes.

How to Replace Your Static List with Async Data #

Let's walk through a concrete example using axios (the same logic applies to fetch).

Step 1: Set Up Redux Thunk #

First, install the middleware and add it to your Redux store:

npm install redux-thunk

Then configure your store:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './path/to/your/reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk) // Enable thunk for async actions
);

Step 2: Write Async Action Creators #

Instead of dispatching a single GET_NEWS action, we'll use three actions to track the async lifecycle: request started, request succeeded, request failed. This lets your component show loading states or error messages.

import axios from 'axios';

// Action types
export const GET_NEWS_REQUEST = 'GET_NEWS_REQUEST';
export const GET_NEWS_SUCCESS = 'GET_NEWS_SUCCESS';
export const GET_NEWS_FAILURE = 'GET_NEWS_FAILURE';

// Synchronous action creators (these are what the reducer will handle)
const getNewsRequest = () => ({ type: GET_NEWS_REQUEST });
const getNewsSuccess = (newsData) => ({ 
  type: GET_NEWS_SUCCESS, 
  payload: newsData 
});
const getNewsFailure = (errorMsg) => ({ 
  type: GET_NEWS_FAILURE, 
  payload: errorMsg 
});

// Async action creator (uses thunk to dispatch multiple actions)
export const fetchNews = () => {
  return async (dispatch) => {
    // First, dispatch that we're starting the request
    dispatch(getNewsRequest());
    
    try {
      // Make the async API call
      const response = await axios.get('https://your-api-endpoint.com/news');
      // Dispatch success action with the fetched data
      dispatch(getNewsSuccess(response.data));
    } catch (error) {
      // Dispatch failure action with the error message
      dispatch(getNewsFailure(error.message || 'Failed to fetch news'));
    }
  };
};

Step 3: Update Your Reducer to Handle the Actions #

Now your reducer will respond to the synchronous actions from the async creator, updating state with loading status, fetched data, or errors:

import { 
  GET_NEWS_REQUEST, 
  GET_NEWS_SUCCESS, 
  GET_NEWS_FAILURE 
} from '../actions/newsActions';

// Initial state with loading, data, and error fields
const initialState = {
  loading: false,
  news: [],
  error: ''
};

export function newsReducer(state = initialState, action) {
  switch (action.type) {
    case GET_NEWS_REQUEST:
      return { ...state, loading: true }; // Show loading state
    case GET_NEWS_SUCCESS:
      return { 
        ...state, 
        loading: false, 
        news: action.payload, // Replace static list with fetched data
        error: '' 
      };
    case GET_NEWS_FAILURE:
      return { 
        ...state, 
        loading: false, 
        news: [], 
        error: action.payload // Store error message
      };
    default:
      return state;
  }
}

Step 4: Use the Async Action in Your Component #

In your React component, you can dispatch fetchNews when it mounts (or on a button click, etc.):

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchNews } from './path/to/newsActions';

function NewsList() {
  const dispatch = useDispatch();
  const { loading, news, error } = useSelector(state => state.news);

  useEffect(() => {
    dispatch(fetchNews()); // Trigger the async fetch when component mounts
  }, [dispatch]);

  if (loading) return <div>Loading news...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <ul>
      {news.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

Wrapping Up #

• Reducers are always synchronous: Never put async logic here—keep them pure.
• Async logic lives in action creators: Use middleware like Redux Thunk to write action creators that return functions, handle the async work, then dispatch regular actions.
• async/await vs Promise.then(): Both work! The official examples might use .then() for compatibility or to show the underlying Promise flow, but async/await is just cleaner syntax for the same thing.

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