async thunk في redux toolkit

Rayden Storm · 13 يونيو 2021

مؤخرا أحاول الانتقال من redux الى redux toolkit وقد تعودت على الأساسيات الخاصة ب reducer

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 10,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value++;
    },
    decrement(state) {
      state.value--;
    },
    incrementby(state, action) {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementby } = counterSlice.actions;
export default counterSlice.reducer;

لكن ماذا اذا اردت عمل dispatch ل action تجلب البيانات من السيرفر ب axios كيف يمكن القيام بذلك في حالة استخدام redux toolkit

Abdullah Muhammad · 13 يونيو 2021

يمكنك إستخدام createAsyncThunk

الخطوة الأولى قم بإنشاء "thunk" كالتالي

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

الخطوة الثانيه
قم بالتعامل مع هذا الأكشن داخل ال reducer
عن طريق إستخدام extraReducers كالتالي


const usersSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: 'idle' },
  reducers: {
  },
  extraReducers: {
    [fetchUserById.fulfilled]: (state, action) => {
      state.entities.push(action.payload)
    },
  },
})

وأخيرا يمكنك أن تستدعي هذا ال "thunk" وعمل "dispatch"

dispatch(fetchUserById(123))

async thunk في redux toolkit

السؤال

Rayden Storm

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Abdullah Muhammad

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية