在React组件中直接使用async/await并将结果存入store是否为最佳实践？

Short answer: No, this isn’t considered a best practice—here’s why, and what you should do instead.

Let’s break down the issues with your example first, then walk through better alternatives:

1. Deprecated Lifecycle Method #

Your code uses componentWillMount, which React has deprecated since version 16.3. This method runs before the component renders and can cause unexpected behavior (like duplicate API calls in server-side rendering, or state updates on a component that hasn’t fully mounted). React’s official recommendation is to use componentDidMount for side effects like data fetching.

2. Unhandled Race Conditions & Memory Leaks #

If your component unmounts before the async request finishes, you’ll try to update the store for a component that no longer exists. This leads to React warnings about memory leaks, and if multiple requests resolve out of order, you might overwrite the store with outdated data.

3. Tight Coupling of UI & Data Logic #

Putting async fetch code directly in the component ties your UI layer to your data fetching logic. This makes the component harder to test (you’ll need to mock API calls and store dispatch every time) and reusing the fetch logic across components becomes repetitive.

Better Alternatives #

Option 1: Move Async Logic to Redux Action Creators #

Since you’re using Redux (evidenced by storeUser and state mapping), the standard practice is to handle async operations with middleware like Redux Thunk or Redux Saga. This keeps your components focused on UI, while data logic lives in reusable, testable action creators.

Example with Redux Thunk:

// UserActions.js
export const fetchUser = () => async (dispatch) => {
  try {
    const user = await userAction.get();
    dispatch({ type: 'STORE_USER', payload: user });
  } catch (err) {
    dispatch({ type: 'FETCH_USER_FAILED', payload: err.message });
  }
};

Then in your component:

class User extends Component {
  componentDidMount() {
    this.props.fetchUser();
  }

  render() {
    return <div>{this.props.user?.name}</div>;
  }
}

const mapStateToProps = (state) => ({
  user: state.User.user,
});

const mapDispatchToProps = (dispatch) => ({
  fetchUser: () => dispatch(fetchUser()),
});

export default connect(mapStateToProps, mapDispatchToProps)(User);

Option 2: Use Modern Data Fetching Libraries #

Libraries like React Query or SWR handle caching, race conditions, background updates, and unmount cleanup automatically. They integrate seamlessly with React and often eliminate the need to store fetched data in Redux entirely (though you can sync with your store if needed).

Example with React Query:

import { useQuery } from 'react-query';

const User = () => {
  const { data: user, isLoading, error } = useQuery('user', userAction.get);

  if (isLoading) return <div>Loading user...</div>;
  if (error) return <div>Failed to load user: {error.message}</div>;

  return <div>{user.name}</div>;
};

Option 3: If You Must Keep Logic in the Component #

If you have a specific reason to retain async logic in the component, at least:

• Replace componentWillMount with componentDidMount
• Add a check to ensure the component is still mounted before updating the store:

class User extends Component {
  _isMounted = false;

  componentDidMount() {
    this._isMounted = true;
    this.getUser();
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  async getUser() {
    try {
      const user = await userAction.get();
      if (this._isMounted) {
        this.props.storeUser(user);
      }
    } catch (err) {
      // Handle error appropriately
    }
  }

  render() {
    return <div>{this.props.user.name}</div>;
  }
}

This prevents dispatching to the store for an unmounted component, but it’s still less maintainable than the first two options.

Final Takeaway #

Storing fetched data in your store is perfectly reasonable, but handling async fetch logic directly in component lifecycle methods creates avoidable maintenance and reliability issues. Using Redux middleware or modern data fetching libraries will make your code cleaner, more testable, and less prone to bugs.

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