前端状态管理实战：从混乱到有序的最佳实践

这种写法的问题在于，数据流完全依赖 props 层层下传。一旦需求变更，比如要在 Header 里显示评论数，你就得把整个评论列表再透传一遍。随着组件层级加深，维护成本会指数级上升。

推荐方案

1. Redux Toolkit

Redux Toolkit 是官方推荐的现代 Redux 写法，解决了样板代码过多的问题。

// store/index.js
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './slices/userSlice';
import postsReducer from './slices/postsSlice';
import commentsReducer from './slices/commentsSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
    posts: postsReducer,
    comments: commentsReducer,
  },
});

// store/slices/userSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk('user/fetchUser', async () => {
  const response = await fetch('/api/user');
  return response.json();
});

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

export default userSlice.reducer;

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

// App.jsx
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUser } from './store/slices/userSlice';
import { fetchPosts } from './store/slices/postsSlice';
import { fetchComments } from './store/slices/commentsSlice';
import UserHeader from './components/UserHeader';
import PostList from './components/PostList';

function App() {
  const dispatch = useDispatch();
  const { loading } = useSelector((state) => state.user);

  useEffect(() => {
    dispatch(fetchUser());
    dispatch(fetchPosts());
    dispatch(fetchComments());
  }, [dispatch]);

  return (
    <div>
      {loading ? <div>加载中...</div> : (
        <div>
          <UserHeader />
          <PostList />
        </div>
      )}
    </div>
  );
}

// components/UserHeader.jsx
import React from 'react';
import { useSelector } from 'react-redux';

function UserHeader() {
  const user = useSelector((state) => state.user.data);
  return <h1>Welcome, {user?.name}</h1>;
}

export default UserHeader;

// components/PostList.jsx
import React from 'react';
import { useSelector } from 'react-redux';
import CommentList from './CommentList';

function PostList() {
  const posts = useSelector((state) => state.posts.data);
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
          <CommentList postId={post.id} />
        </div>
      ))}
    </div>
  );
}

export default PostList;

// components/CommentList.jsx
import React from 'react';
import { useSelector } from 'react-redux';

function CommentList({ postId }) {
  const comments = useSelector((state) => 
    state.comments.data.filter(comment => comment.postId === postId)
  );
  return (
    <div>
      {comments.map(comment => (
        <div key={comment.id}>{comment.content}</div>
      ))}
    </div>
  );
}

export default CommentList;

这里要注意，Redux Toolkit 的 createAsyncThunk 会自动处理 pending、fulfilled 和 rejected 状态，省去了手动写 loading 和 error 逻辑的麻烦。在组件中通过 useSelector 订阅状态，只有相关切片变化时才会触发重渲染。

2. Zustand

如果你不想引入庞大的 Redux 生态，Zustand 是个轻量级的选择。它基于 Hook，API 更简洁。

// store/index.js
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set, get) => ({
      user: null,
      posts: [],
      comments: [],
      loading: false,
      error: null,
      fetchUser: async () => {
        set({ loading: true, error: null });
        try {
          const response = await fetch('/api/user');
          const data = await response.json();
          set({ user: data, loading: false });
        } catch (error) {
          set({ error: error.message, loading: false });
        }
      },
      fetchPosts: async () => {
        set({ loading: true, error: null });
        try {
          const response = await fetch('/api/posts');
          const data = await response.json();
          set({ posts: data, loading: false });
        } catch (error) {
          set({ error: error.message, loading: false });
        }
      },
      fetchComments: async () => {
        set({ loading: true, error: null });
        try {
          const response = await fetch('/api/comments');
          const data = await response.json();
          set({ comments: data, loading: false });
        } catch (error) {
          set({ error: error.message, loading: false });
        }
      },
    }),
    { name: 'app-storage' }
  )
);

export default useStore;

// App.jsx
import React, { useEffect } from 'react';
import useStore from './store';
import UserHeader from './components/UserHeader';
import PostList from './components/PostList';

function App() {
  const { loading, fetchUser, fetchPosts, fetchComments } = useStore();

  useEffect(() => {
    fetchUser();
    fetchPosts();
    fetchComments();
  }, [fetchUser, fetchPosts, fetchComments]);

  return (
    <div>
      {loading ? <div>加载中...</div> : (
        <div>
          <UserHeader />
          <PostList />
        </div>
      )}
    </div>
  );
}

// components/UserHeader.jsx
import React from 'react';
import useStore from '../store';

function UserHeader() {
  const user = useStore((state) => state.user);
  return <h1>Welcome, {user?.name}</h1>;
}

export default UserHeader;

// components/PostList.jsx
import React from 'react';
import useStore from '../store';
import CommentList from './CommentList';

function PostList() {
  const posts = useStore((state) => state.posts);
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
          <CommentList postId={post.id} />
        </div>
      ))}
    </div>
  );
}

export default PostList;

// components/CommentList.jsx
import React from 'react';
import useStore from '../store';

function CommentList({ postId }) {
  const comments = useStore((state) => 
    state.comments.filter(comment => comment.postId === postId)
  );
  return (
    <div>
      {comments.map(comment => (
        <div key={comment.id}>{comment.content}</div>
      ))}
    </div>
  );
}

export default CommentList;

Zustand 的优势在于无需 Provider 包裹，直接导入 hook 即可使用。persist 中间件还能方便地实现本地存储持久化，适合需要缓存用户信息或偏好设置的场景。

3. Jotai

Jotai 采用原子化状态管理，适合对细粒度更新有要求的场景。

// store/atoms.js
import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';

// 状态 atoms
const userAtom = atomWithStorage('user', null);
const postsAtom = atomWithStorage('posts', []);
const commentsAtom = atomWithStorage('comments', []);
const loadingAtom = atom(false);
const errorAtom = atom(null);

// 动作 atoms
const fetchUserAtom = atom(
  null,
  async (_, set) => {
    set(loadingAtom, true);
    set(errorAtom, null);
    try {
      const response = await fetch('/api/user');
      const data = await response.json();
      set(userAtom, data);
    } catch (error) {
      set(errorAtom, error.message);
    } finally {
      set(loadingAtom, false);
    }
  }
);

const fetchPostsAtom = atom(
  null,
  async (_, set) => {
    set(loadingAtom, true);
    set(errorAtom, null);
    try {
      const response = await fetch('/api/posts');
      const data = await response.json();
      set(postsAtom, data);
    } catch (error) {
      set(errorAtom, error.message);
    } finally {
      set(loadingAtom, false);
    }
  }
);

const fetchCommentsAtom = atom(
  null,
  async (_, set) => {
    set(loadingAtom, true);
    set(errorAtom, null);
    try {
      const response = await fetch('/api/comments');
      const data = await response.json();
      set(commentsAtom, data);
    } catch (error) {
      set(errorAtom, error.message);
    } finally {
      set(loadingAtom, false);
    }
  }
);

export { userAtom, postsAtom, commentsAtom, loadingAtom, errorAtom, fetchUserAtom, fetchPostsAtom, fetchCommentsAtom };

// App.jsx
import React, { useEffect } from 'react';
import { useAtomValue, useSetAtom } from 'jotai';
import { loadingAtom, fetchUserAtom, fetchPostsAtom, fetchCommentsAtom } from './store/atoms';
import UserHeader from './components/UserHeader';
import PostList from './components/PostList';

function App() {
  const loading = useAtomValue(loadingAtom);
  const fetchUser = useSetAtom(fetchUserAtom);
  const fetchPosts = useSetAtom(fetchPostsAtom);
  const fetchComments = useSetAtom(fetchCommentsAtom);

  useEffect(() => {
    fetchUser();
    fetchPosts();
    fetchComments();
  }, [fetchUser, fetchPosts, fetchComments]);

  return (
    <div>
      {loading ? <div>加载中...</div> : (
        <div>
          <UserHeader />
          <PostList />
        </div>
      )}
    </div>
  );
}

// components/UserHeader.jsx
import React from 'react';
import { useAtomValue } from 'jotai';
import { userAtom } from '../store/atoms';

function UserHeader() {
  const user = useAtomValue(userAtom);
  return <h1>Welcome, {user?.name}</h1>;
}

export default UserHeader;

// components/PostList.jsx
import React from 'react';
import { useAtomValue } from 'jotai';
import { postsAtom } from '../store/atoms';
import CommentList from './CommentList';

function PostList() {
  const posts = useAtomValue(postsAtom);
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
          <CommentList postId={post.id} />
        </div>
      ))}
    </div>
  );
}

export default PostList;

// components/CommentList.jsx
import React from 'react';
import { useAtomValue } from 'jotai';
import { commentsAtom } from '../store/atoms';

function CommentList({ postId }) {
  const comments = useAtomValue(commentsAtom);
  const postComments = comments.filter(comment => comment.postId === postId);
  return (
    <div>
      {postComments.map(comment => (
        <div key={comment.id}>{comment.content}</div>
      ))}
    </div>
  );
}

export default CommentList;

Jotai 的核心思想是原子化，每个状态都是独立的。这意味着只有读取了某个 atom 的组件才会响应其变化，性能优化非常友好。不过对于复杂的数据流操作，可能需要配合其他工具使用。

总结

这三种方案各有千秋。Redux Toolkit 适合大型应用，生态完善；Zustand 轻量灵活，上手快；Jotai 则提供了细粒度的控制能力。根据项目规模选择合适的工具，才能让状态管理真正成为助力，而不是负担。