How do I use reducers in TypeScript?

How do I use reducers in TypeScript?

Using reducers in TypeScript involves defining the state and action types. You can create a reducer function that takes the current state and an action, returning the new state based on the action type.

Can you show me a simple example?

Sure! Here's a basic example:

interface State {
  count: number;
}

interface Action {
  type: string;
  payload?: any;
}

const initialState: State = { count: 0 };

const reducer = (state: State = initialState, action: Action): State => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

This reducer manages a count state.

What about using it with React?

In React, you can use the useReducer hook to manage state with your reducer. Here's how:

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

<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
<p>Count: {state.count}</p>

Are there any best practices for using reducers?

Yes! Some best practices include keeping your reducer pure, using meaningful action types, and organizing your actions and state types for better maintainability.