CODEWITHSUNDEEP
reactjstypescriptuse-reducer
Gass
Gass

Reputation: 9394

Can someone explain this line of my implementation of React dispatch with useReducer and TypeScript?

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.

Upvotes: 0

Views: 67

Answers (1)

Bernhard Josephus
Bernhard Josephus

Reputation: 715

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!

Upvotes: 1

Related Questions