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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية