إدارة الحالة في React: Redux Toolkit مقابل Zustand مقابل Jotai

مقارنة إدارة الحالة في React

اختر حلّ إدارة الحالة المناسب لمشروع React الخاص بك.

Redux Toolkit

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

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

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

Zustand — بديل أبسط

import { create } from 'zustand';

const useStore = create((set, get) => ({
    user: null,
    loading: false,

    fetchUser: async (id) => {
        set({ loading: true });
        const user = await fetch(`/api/users/${id}`).then(r => r.json());
        set({ user, loading: false });
    },

    logout: () => set({ user: null }),
}));

// Usage in component
function Profile() {
    const { user, loading, fetchUser } = useStore();
    // ...
}

Jotai — حالة ذرّية

import { atom, useAtom } from 'jotai';

const userAtom = atom(null);
const loadingAtom = atom(false);

// Derived atom
const isLoggedInAtom = atom((get) => get(userAtom) !== null);

// Async atom
const userDataAtom = atom(
    (get) => get(userAtom),
    async (get, set, id) => {
        set(loadingAtom, true);
        const user = await fetch(`/api/users/${id}`).then(r => r.json());
        set(userAtom, user);
        set(loadingAtom, false);
    }
);

متى تستخدم كلاً منها

• Redux Toolkit: التطبيقات الكبيرة، منطق الحالة المعقّد، مشاريع الفِرَق
• Zustand: التطبيقات البسيطة إلى المتوسطة، إعداد سريع
• Jotai: التفاعلية دقيقة الحبيبات، التحديثات الذرّية