React/Redux新手求助：将类组件转换为Redux函数组件

Hey there! Let's walk through converting your class components to functional ones with Redux hooks—they're way more concise once you get the hang of it. Here's how to do it step by step:

1. Update User.js (the data-fetching component) #

We'll swap out the class lifecycle method componentWillMount with React's useEffect hook, and use useDispatch instead of connect to trigger your Redux action.

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import Profile from './Profile';

// Functional component instead of class
const User = () => {
  const dispatch = useDispatch();

  // Replace componentWillMount with useEffect
  // This runs once when the component mounts, just like your original logic
  useEffect(() => {
    dispatch(fetchUser(/* pass your arguments here */));
  }, [dispatch]); // Dispatch is stable, so it's safe to add as a dependency

  return <Profile />;
};

export default User;

2. Update Profile.js (the state-reading component) #

Instead of mapStateToProps and connect, we'll use the useSelector hook to pull data directly from the Redux store.

import React from 'react';
import { useSelector } from 'react-redux';

const Profile = () => {
  // Replace mapStateToProps with useSelector
  const user = useSelector(state => state.store.user);

  // Pro tip: Add a guard clause if user might be undefined (e.g., before the fetch completes)
  if (!user?.profile) return <h1>Loading...</h1>;

  return <h1>{user.profile.name}</h1>;
};

export default Profile;

Quick Notes: #

• No more connect wrapping needed—Redux hooks let you interact with the store directly inside functional components.
• The useEffect hook here behaves almost identically to componentWillMount for your data-fetching use case. If you need the exact timing of componentWillMount (rare), you could use useLayoutEffect instead, but useEffect works for 99% of cases.
• The optional guard clause in Profile prevents errors if the user data hasn't loaded yet—always a good practice for async data!

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