Couldn't find any related answer, the only one was related to Redux directly, thus asking a question that may seem obvious to some of you. As far as my code it seems that everything is correct yet I'm struggling with the following error: Expected 0 arguments, but got 1
Code:
// 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;You are quite there! There is only a few things to fix. First, you need to remove the type any from the reducer and always return the whole state inside the function:
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;
}
}
Ultimately, when you call dispatch you wrote type instead of types and you also did not pass the payload. If the payload is optional you have to set it as optional in the interface:
interface Action {
types: ActionType;
payload?: number; // note the question mark
}
dispatch({types: ActionType.INCREASE});