What are some examples of using Redux with TypeScript?

What are some examples of using Redux with TypeScript?

Using Redux with TypeScript can enhance type safety in your applications. Here are a few examples: 1. Defining action types and creators with TypeScript interfaces. 2. Creating a typed Redux store. 3. Using selectors with TypeScript for better type inference.

Can you show me a code snippet for a typed Redux action?

Sure! Here's a simple example:

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

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

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

How do I set up a Redux store with TypeScript?

To set up a Redux store with TypeScript, you can follow these steps:

1. Define your state interface.
2. Create a reducer function with typed state.
3. Use createStore from Redux with your reducer.

Here's a basic example:

import { createStore } from 'redux';

interface State {
  todos: string[];
}

const initialState: State = { todos: [] };

const reducer = (state = initialState, action: any) => {
  switch (action.type) {
    // handle actions
    default:
      return state;
  }
};

const store = createStore(reducer);

What about using Redux Toolkit with TypeScript?

Redux Toolkit simplifies the setup. You can use createSlice to define your state and reducers in one go. Here's an example:

import { createSlice, configureStore } from '@reduxjs/toolkit';

interface TodoState {
  todos: string[];
}

const todoSlice = createSlice({
  name: 'todos',
  initialState: { todos: [] } as TodoState,
  reducers: {
    addTodo: (state, action) => {
      state.todos.push(action.payload);
    },
  },
});

const store = configureStore({ reducer: todoSlice.reducer });