How do I manage actions in Redux with TypeScript?

How do I manage actions in Redux with TypeScript?

To manage actions in Redux with TypeScript, you need to define action types, action creators, and use them in your reducers.

Can you show me an example of an action creator?

Sure! Here's a simple example:

// actionTypes.ts
export const ADD_TODO = 'ADD_TODO';

// actions.ts
import { ADD_TODO } from './actionTypes';

export const addTodo = (text: string) => ({
  type: ADD_TODO,
  payload: text,
});

What about typing the action in TypeScript?

You can define an interface for your action:

interface AddTodoAction {
  type: typeof ADD_TODO;
  payload: string;
}

type TodoActionTypes = AddTodoAction;

How do I use these actions in a reducer?

In your reducer, you can use a switch statement to handle the actions:

const todoReducer = (state = [], action: TodoActionTypes) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return state;
  }
};