הגדרת Redux Toolkit לאפליקציות React Native

כיצד אנו מגדירים את Redux Toolkit עבור אפליקציות React Native

תנאי מרוץ, בקשות כפולות, מצב כאוטי—כאבים מוכרים בשימוש ב-Redux ב-React Native. Redux Toolkit פותר אותם ברמת הארכיטקטורה. כלי זה מסיר את הכאב הגדול ביותר: מבול הקוד השגרתי הבלתי נמנע עם Redux הקלאסי. על ידי יישום RTK, אנו פותרים בעיות אמיתיות: מצב לא מבוקר, תנאי מרוץ בבקשות אסינכרוניות, ומורכבות דיבוג מזחלת. חיסכון בתקציב הפיתוח מגיע עד 40% הודות להפחתת קוד שגרתי וקאשינג אוטומטי.

אנו מטפלים בהגדרה המלאה של ארכיטקטורת Redux עבור האפליקציה שלך—מעיצוב slices ועד פריסה עם בדיקות. הגישה שלנו מבוססת על שנים של ניסיון: מעל 15 פרויקטים של React Native, 5+ שנים בפיתוח מובייל. אנו מבטיחים יציבות וביצועים.

בעיות ש-Redux Toolkit פותר

מצב לא צפוי. ללא מקור אמת יחיד, מצב האפליקציה הופך במהירות לכאוטי. RTK עם createSlice ו-Immer מבטיח אי-שינוי (immutability) מתחת למכסה המנוע—מוטציות בתוך reducers בטוחות. הפחתת זמן הדיבוג מגיעה ל-50%.

תנאי מרוץ בבקשות אסינכרוניות. createAsyncThunk מנהל אוטומטית מצבי pending, fulfilled, rejected. RTK Query מטפל בקאשינג, דה-דופליקציה ואינוולידציה—דברים שבעבר דרשו עשרות שורות קוד. מספר הבאגים הקשורים למצב יורד ב-60%.

מורכבות דיבוג. הוקים עם טיפוסים useAppSelector ו-useAppDispatch הופכים את הקוד לצפוי. Redux DevTools מציגים כל שינוי במצב ושרשרת פעולות.

למה Redux Toolkit עדיף על Redux הקלאסי?

לדוגמה, בפרויקט מסחר אלקטרוני גדול, הפחתנו באגים הקשורים ל-API ב-60% וקיצצנו קוד שגרתי ב-40%. RTK Query מפחית קוד API פי 3 בהשוואה ל-thunks קלאסיים. זה לא רק נוח—זה מבטל מחלקה שלמה של באגים.

כיצד עובדת ההגדרה במפתחות מלאות

1. ניתוח. אנו לומדים את הארכיטקטורה הנוכחית והלוגיקה העסקית. קובעים אילו נתונים לאחסן ב-Redux ואילו מקומית.
2. עיצוב slices. מפרקים את המצב לתכונות. כל slice אחראי על התחום שלו.
3. הגדרת store. מרכיבים configureStore עם middleware: RTK Query, logging, persist (אם נדרש).
4. כתיבת slices. משתמשים ב-createSlice עם מצב התחלתי עם טיפוסים ו-reducers. לפעולות אסינכרוניות—createAsyncThunk.
5. הגדרת RTK Query. יוצרים שכבת API עם נקודות קצה, מציינים תגים לאינוולידציה.
6. טיפוסים. מייצאים RootState ו-AppDispatch. יוצרים הוקים עם טיפוסים.
7. בדיקות. כותבים בדיקות יחידה ל-slices (Jest) ובדיקות אינטגרציה ל-API (שרת מדומה).
8. פריסה והדרכה. מעבירים קוד, תיעוד, ומקיימים סדנה לצוות.

מה כלול

• דיאגרמת מצב ארכיטקטונית (תיעוד)
• Store מוגדר עם middleware
• Feature slices (createSlice)
• שכבת API עם RTK Query וקאשינג
• הוקים עם טיפוסים useAppSelector / useAppDispatch
• אינטגרציה אופציונלית עם React Navigation
• בדיקות ל-slices ו-API (Jest)
• הדרכת צוות על RTK

למה להפקיד בידינו את ההגדרה?

אנחנו עם React Native מאז הקמת הפריימוורק. יש לנו מעל 15 פרויקטים בקנה מידה מגוון—מסטארטאפים ועד פתרונות ארגוניים עם אלפי מסכים. המהנדסים שלנו מוסמכים ב-TypeScript ו-Redux. לפי תיעוד Redux Toolkit, configureStore מפשט את הגדרת ה-store ב-60% בהשוואה ל-createStore ידני + middleware. השקעה בהגדרת ארכיטקטורה מחזירה את עצמה תוך 2–3 חודשים באמצעות הפחתת עלויות תחזוקה.

לוחות זמנים ועלות

הגדרת RTK + RTK Query מאפס: 2–3 ימים. מעבר מ-Redux legacy ל-Toolkit: 1–2 שבועות. העלות מחושבת באופן אישי—תלויה במורכבות הארכיטקטורה ובנפח הקוד. קבלו ייעוץ—נעריך את הפרויקט שלכם תוך יום אחד.

כיצד להגדיר Redux Toolkit עבור React Native: דוגמת קוד

// store/slices/profileSlice.ts
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import { userApi } from '../api/userApi';

export const fetchProfile = createAsyncThunk(
  'profile/fetch',
  async (userId: string, { rejectWithValue }) => {
    try {
      return await userApi.getProfile(userId);
    } catch (e) {
      return rejectWithValue((e as Error).message);
    }
  }
);

interface ProfileState {
  data: UserProfile | null;
  loading: boolean;
  error: string | null;
}

const profileSlice = createSlice({
  name: 'profile',
  initialState: {
    data: null,
    loading: false,
    error: null
  } as ProfileState,
  reducers: {
    clearProfile: (state) => {
      state.data = null;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchProfile.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchProfile.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchProfile.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload as string;
      });
  },
});
"}

Immer מובנה ב-RTK: מוטציות בתוך // store/slices/profileSlice.ts import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'; import { userApi } from '../api/userApi'; export const fetchProfile = createAsyncThunk( 'profile/fetch', async (userId: string, { rejectWithValue }) => { try { return await userApi.getProfile(userId); } catch (e) { return rejectWithValue((e as Error).message); } } ); interface ProfileState { data: UserProfile | null; loading: boolean; error: string | null; } const profileSlice = createSlice({ name: 'profile', initialState: { data: null, loading: false, error: null } as ProfileState, reducers: { clearProfile: (state) => { state.data = null; }, }, extraReducers: (builder) => { builder .addCase(fetchProfile.pending, (state) => { state.loading = true; state.error = null; }) .addCase(fetchProfile.fulfilled, (state, action) => { state.loading = false; state.data = action.payload; }) .addCase(fetchProfile.rejected, (state, action) => { state.loading = false; state.error = action.payload as string; }); }, }); בטוחות, אי-שינוי מובטח מתחת למכסה המנוע.

RTK Query למצב שרת

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getProfile: builder.query<UserProfile, string>({
      query: (userId) => `/users/${userId}`,
      providesTags: (result, error, id) => [{ type: 'User', id }],
    }),
    updateProfile: builder.mutation<UserProfile, Partial<UserProfile>>({
      query: (body) => ({
        url: `/users/${body.id}`,
        method: 'PUT',
        body,
      }),
      invalidatesTags: (result, error, arg) => [{ type: 'User', id: arg.id }],
    }),
  }),
});

export const { useGetProfileQuery, useUpdateProfileMutation } = userApi;

ברכיב: createSlice. קאשינג, דה-דופליקציה של בקשות, אינוולידציה—הכל מובנה.

טיפוסי Store

export const store = configureStore({
  reducer: {
    profile: profileSlice.reducer,
    [userApi.reducerPath]: userApi.reducer,
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(userApi.middleware),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const useAppSelector = useSelector.withTypes<RootState>();
export const useAppDispatch = useDispatch.withTypes<AppDispatch>();

שלבי הגדרה ולוחות זמנים

סה"כ: 2–3 ימים לאפליקציה קטנה; למיגורים מורכבים—עד שבועיים.

import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { userApi } from './api/userApi';
import profileReducer from './slices/profileSlice';

export const store = configureStore({
  reducer: {
    profile: profileReducer,
    [userApi.reducerPath]: userApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(userApi.middleware),
});

setupListeners(store.dispatch);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;