كيف يمكنني استخدام getState() في toolkit Redux؟

سأفترض أنك تستخدم axios لإرسال الطلبات HTTP، و أيضا  لديك حالة في Redux لتخزين الـ token.

// في ملف authSlice.js

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

// استخدمنا createAsyncThunk لتحويل الطلبات الى حالات متقدمة (pending, fulfilled, rejected)
export const fetchToken = createAsyncThunk('auth/fetchToken', async (_, thunkAPI) => {
  try {
    // هنا يمكنك استخدام thunkAPI.getState() للوصول إلى حالة Redux
    const state = thunkAPI.getState();

    // استخدم state.auth.token كطريقة للوصول إلى الـ token
    const response = await axios.post('url/to/token/endpoint', { username: state.auth.username, password: state.auth.password });

    // قم بإرجاع البيانات التي تم استلامها من الطلب كقيمة معادة الوعد
    return response.data.token;
  } catch (error) {
    // في حالة وجود أي خطأ، قم بإرجاع الخطأ
    return thunkAPI.rejectWithValue(error.response.data);
  }
});

// الجزء الخاص بتحديث الحالة بناءً على حالة الطلب
const authSlice = createSlice({
  name: 'auth',
  initialState: {
    token: null,
  },
  reducers: {
    // يمكنك إضافة reducers إضافية هنا
  },
  extraReducers: (builder) => {
    // اتبع createAsyncThunk لتحديث الحالة بناءً على حالة الطلب
    builder.addCase(fetchToken.fulfilled, (state, action) => {
      state.token = action.payload;
    });
    builder.addCase(fetchToken.rejected, (state, action) => {
      // يمكنك تحديد كيف تتعامل مع حالة الرفض هنا، مثلاً قم بتحديث حالة الخطأ
    });
  },
});

// تصدير action و reducer
export const { /* أي reducers إضافية تريد تصديرها */ } = authSlice.actions;
export default authSlice.reducer;

في الكود الذي ارفقته استخدمت createAsyncThunk  لإنشاء fetchToken واستخدمنا getState الخاصة ب thunkAPI للوصول إلى حالة Redux و ايضا استخدمنا state.auth.token كقيمة للـ token.

بتاريخ 3 ساعة قال Chihab Hedidi:

سأفترض أنك تستخدم axios لإرسال الطلبات HTTP، و أيضا  لديك حالة في Redux لتخزين الـ token.

// في ملف authSlice.js

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

// استخدمنا createAsyncThunk لتحويل الطلبات الى حالات متقدمة (pending, fulfilled, rejected)
export const fetchToken = createAsyncThunk('auth/fetchToken', async (_, thunkAPI) => {
  try {
    // هنا يمكنك استخدام thunkAPI.getState() للوصول إلى حالة Redux
    const state = thunkAPI.getState();

    // استخدم state.auth.token كطريقة للوصول إلى الـ token
    const response = await axios.post('url/to/token/endpoint', { username: state.auth.username, password: state.auth.password });

    // قم بإرجاع البيانات التي تم استلامها من الطلب كقيمة معادة الوعد
    return response.data.token;
  } catch (error) {
    // في حالة وجود أي خطأ، قم بإرجاع الخطأ
    return thunkAPI.rejectWithValue(error.response.data);
  }
});

// الجزء الخاص بتحديث الحالة بناءً على حالة الطلب
const authSlice = createSlice({
  name: 'auth',
  initialState: {
    token: null,
  },
  reducers: {
    // يمكنك إضافة reducers إضافية هنا
  },
  extraReducers: (builder) => {
    // اتبع createAsyncThunk لتحديث الحالة بناءً على حالة الطلب
    builder.addCase(fetchToken.fulfilled, (state, action) => {
      state.token = action.payload;
    });
    builder.addCase(fetchToken.rejected, (state, action) => {
      // يمكنك تحديد كيف تتعامل مع حالة الرفض هنا، مثلاً قم بتحديث حالة الخطأ
    });
  },
});

// تصدير action و reducer
export const { /* أي reducers إضافية تريد تصديرها */ } = authSlice.actions;
export default authSlice.reducer;

في الكود الذي ارفقته استخدمت createAsyncThunk  لإنشاء fetchToken واستخدمنا getState الخاصة ب thunkAPI للوصول إلى حالة Redux و ايضا استخدمنا state.auth.token كقيمة للـ token.

 

 

شكرا أخي جزاك الله خيرا .  بقيت لي نقطة فقط سأتحقق منها و أعود .