traintocode

useReducer Hook

The useReducer() hook is typically used for state management in React components and is a great alternative to useState() when you have complex state logic.

In TypeScript, you can define the types for your state and actions to ensure your reducer function handles them correctly. This looks something like this:

type StateType = {
  // Define the state structure
};

type ActionType = {
  // Define the action structure
};

function reducer(state: StateType, action: ActionType): StateType {
  // Reducer logic
}

In the reducer function, state and action are strongly typed based on StateType and ActionType. This helps catch errors at compile time if the state or actions do not conform to the defined types.

Exercise

Use the counterReducer function provided to display the value of the counter from the state.

Increment the counter when the button is pushed by dispatching the 'increment' action.

If you need a reminder of how to use the useReducer() hook in React, or any other questions related to the exercise, ask below:

You cannot do the coding exercises on this device, visit this page on a larger screen.

App.tsx

⋮