How do I create reducers in Redux with TypeScript?

How do I create reducers in Redux with TypeScript?

To create reducers in Redux with TypeScript, you first define your state and action types. Then, you can create a reducer function that takes the current state and an action as arguments.

Can you show me an example of a simple reducer?

Sure! Here's a simple counter reducer:

interface CounterState {
  count: number;
}

const initialState: CounterState = { count: 0 };

const counterReducer = (state = initialState, action: { type: string; payload?: number }): CounterState => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

This reducer handles incrementing and decrementing a count.

How do I integrate this reducer with my Redux store?

You can integrate the reducer with your Redux store by using the createStore function from Redux. Here's how:

import { createStore } from 'redux';

const store = createStore(counterReducer);

Now your store is set up with the counter reducer!

What if I want to handle more actions in my reducer?

You can simply add more cases to the switch statement in your reducer. Just ensure that your action types are defined and that your actions are dispatched correctly.