مشكلة في ال userReducer مع Typescript

منتصر احمد · 6 يوليو 2023

هذا هو نص الخطأ

No overload matches this call.
Overload 1 of 5, '(reducer: ReducerWithoutAction<any>, initializerArg: any, initializer?: undefined): [any, DispatchWithoutAction]', gave the following error.

هذه هيا ال reducerFunction


enum actions {
  INCREASE = "INCREASE",
  DECREASE = "DECREASE",
}

interface state {
  b_count: number;
  a_count: number;
}

interface payload {
  b_count: number;
  a_count: number;
}

interface action {
  type: string;
  payload: payload;
}
  
function reducerFunction(state: state, action: action) {
  switch (action.type) {
    case actions.INCREASE:
      return {
        ...state,
        a_count: state.b_count + 1,
      };
    case actions.DECREASE:
      return {
        ...state,
        a_count: state.b_count - 1,
      };
    default:
      state;
  }
}

وهذه هي كيفية الإستخدام

let [state, dispatch] = useReducer(reducerFunction, {
  b_count: 0,
  a_count: 0,
});

Adnane Kadri · 6 يوليو 2023

الخطأ الذي تحتويه الرسالة يشير إلى عدم تطابق التوقيع (signature) لدالة الـ useReducer مع الـ reducer الخاص بك. يبدو أن هناك عدم تطابق في نوع المعاملات الممررة عبر الـ useReducer.

يحتمل أن يكون ذلك بسبب أن الوظيفة reducerFunction تعيد undefined بشكل افتراضي، أضف استعلام return الى عبارة default:

default:
      return state;

Mustafa Suleiman · 6 يوليو 2023

المشكلة بسبب استخدام دالة useReducer في TypeScript بشكل غير صحيح، حيث يجب أن تحدد نوع الـ reducer الخاص بك بشكل صحيح، وتتوقع useReducer أن تمرر reducer يستقبل حالة وإجراء ويعيد الحالة الجديدة، ووفقًا للواجهة التي قمت بتعريفها، الدالة reducerFunction من المفترض أن تعيد حالة جديدة من نوع state وليس void.

وتستطيع تحديد النوع العام للـ reducer كالتالي:

function reducerFunction(state: state, action: action): state {
  // ...
}

وبذلك تحدد أن الدالة reducerFunction ستعيد حالة جديدة من نوع state وليس void، وبالتالي يتوافق مع متطلبات useReducer.

وبعد تحديد النوع العام للـ reducer، بإمكانك استخدامه في useReducer كما هو:

let [state, dispatch] = useReducer(reducerFunction, {
  b_count: 0,
  a_count: 0,
});

مشكلة في ال userReducer مع Typescript

السؤال

منتصر احمد

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

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

2 أجوبة على هذا السؤال

Recommended Posts

Adnane Kadri

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

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

Mustafa Suleiman

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية