前端状态管理：Redux、Zustand 与 Jotai 方案对比

方案总结：这状态管理，就像在玩传球游戏，球传来传去都不知道传到哪里了。

正确姿势

1. Redux Toolkit

// 正确姿势：Redux Toolkit
// 1. 安装依赖
// npm install @reduxjs/toolkit react-redux

// 2. 创建 store
// 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,
  },
});

// 3. 创建 slices
// 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;

// 4. 使用 store
// 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>
);

// 5. 使用状态
// 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;

2. Zustand

// 正确姿势：Zustand
// 1. 安装依赖
// npm install zustand

// 2. 创建 store
// 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;

// 3. 使用 store
// 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;

3. Jotai

// 正确姿势：Jotai
// 1. 安装依赖
// npm install jotai

// 2. 创建 atoms
// 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 };

// 3. 使用 atoms
// 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;

方案总结：这才叫前端状态管理，集中管理状态，组件之间共享状态，再也不用担心状态传递的问题了。