How can I use TypeScript with Redux?

How can I use TypeScript with Redux?

You can use TypeScript with Redux by defining your state and action types. Would you like a code example?

Yes, please provide a code example.

Sure! Here's a simple example:

interface State {
  count: number;
}

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

const initialState: State = { count: 0 };

const reducer = (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 defines a simple counter state and actions to increment and decrement it. Do you need more details?

What about using Redux Toolkit with TypeScript?

Redux Toolkit simplifies the setup. You can create slices with TypeScript like this:

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

interface State {
  count: number;
}

const initialState: State = { count: 0 };

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.count += 1;
    },
    decrement(state) {
      state.count -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

This approach is more concise and leverages Immer for immutable updates.