جاوااسکریپت - تابع dispatch در UseReducer خطای غیرمنتظره میدهد: انتظار ۰ آرگومان بود، اما ۱ دریافت شد

هیچ پاسخ مرتبطی پیدا نکردم، تنها یک جواب مستقیماً به Redux مرتبط بود، بنابراین سؤالی میپرسم که ممکن است برای برخی از شما آشکار به نظر برسد. از نظر کد من به نظر میرسد همه چیز درست است اما من با خطای زیر دست و پنجه نرم میکنم: انتظار ۰ آرگومان بود، اما ۱ دریافت شد

کد :

 // An enum with all the types of actions to use in our reducer
  enum ActionType {
    INCREASE = 'INCREASE',
  }

  // An interface for our actions
interface Action {
  types: ActionType;
  payload: number;
}

// An interface for our state
interface allState {
  playersNumber: number,
  playerData: string
}


const reducer : any = (state : allState, action : Action) => {
    switch (action.types) {
      case ActionType.INCREASE:
        return { playersNumber: state.playersNumber + 5}
    }
  }

  const initialState = {
    playersNumber : 0,
    playerData: ""
  }

const App : FC<any> = () => {
  const [responseData , setResponseData] = useState<Array<object>>([]);

  const [state, dispatch] = useReducer(reducer, initialState);


  // Fetching data with Axios
  const fetchingData = async () => {
    const response = await axios.get<Array<object>>('http://localhost:3006/lfy');
    setResponseData(response.data);
    console.log(response.data.length);
    dispatch({type: ActionType.INCREASE})
    
  }

  useEffect(() => {
    fetchingData();
  }, []);


  return (
    <Routes>
      {console.log(state)}
      <Route path="/" element={<Home />} />
    </Routes>
  );
}

export default App;

پاسخ شماره ۱

شما تقریباً درست هستید! فقط چند چیز کوچک برای اصلاح وجود دارد. ابتدا، شما باید نوع any را از reducer حذف کنید و همیشه کل state را داخل تابع برگردانید:

const reducer = (state : allState, action : Action) => {
 switch (action.types) {
  case ActionType.INCREASE:
   return {...state, playersNumber: state.playersNumber + 5}; // use the shallow copy for the state so you make sure to not replace it completely
  default:
   return state;
 }
}

در نهایت، وقتی که dispatch را فراخوانی میکنید، شما type را به جای types نوشتید و همچنین payload را ارسال نکردید. اگر payload اختیاری است، باید آن را به عنوان اختیاری در اینترفیس مشخص کنید:

interface Action {
  types: ActionType;
  payload?: number; // note the question mark
}

dispatch({types: ActionType.INCREASE});