0

So, to describe it as simple as possible. I have a component App where I'm using the useReducer hook to declare the state and dispatch function, like so:

const [state, dispatch] = useReducer(appReducer, initialState)

In this component through the JSX I pass the dispatch as argument to functions such as handleLogin:

function handleLogin(e: React.FormEvent, dispatch: React.Dispatch<any>): void{
    dispatch({type:'login'})
    e.preventDefault()
}

Everything works without errors, the only thing is that I don't quite understand what I'm doing by writing this: dispatch: React.Dispatch<any>

If someone can explain in detail what this means, would be great. And if it is the best way ?? Which I don't think so, because there is an any .. How could it be improved ?

Also, I haven't found documentation to read about these things. Mainly docs about useReducer hook and TypeScript. If someone can help me in this regard I would appreciate it.

Gass
  • 7,536
  • 3
  • 37
  • 41

1 Answers1

1

For the type of the dispatch argument you can change the any to your action interface/type

React.Dispatch<ReducerAction>

Assuming your action is called ReducerAction

Hope it helps!

Bernhard Josephus
  • 695
  • 8
  • 22