How do I create a slice in Redux Toolkit with TypeScript?

How do I create a slice in Redux Toolkit with TypeScript?

To create a slice in Redux Toolkit with TypeScript, you can use the createSlice function. Here's a basic example:

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

interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

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

What are the benefits of using Redux Toolkit with TypeScript?

Using Redux Toolkit with TypeScript provides several benefits:

1. Type Safety: Ensures that your state and actions are type-checked, reducing runtime errors.
2. Simplified Code: Redux Toolkit simplifies the setup and reduces boilerplate code.
3. Better Developer Experience: Enhanced autocompletion and documentation in IDEs due to TypeScript.
4. Built-in Best Practices: Encourages best practices like immutability and the use of slices.

Can you explain how to use createAsyncThunk with TypeScript?

Certainly! createAsyncThunk is used for handling asynchronous actions. Here's an example:

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

export const fetchUser = createAsyncThunk('user/fetchUser', async (userId: string) => {
  const response = await axios.get(`/api/users/${userId}`);
  return response.data;
});

const userSlice = createSlice({
  name: 'user',
  initialState: { user: null, status: 'idle', error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.user = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default userSlice.reducer;

What is the difference between createSlice and createReducer?

createSlice is a higher-level abstraction that combines actions and reducers into a single function, making it easier to manage state. It automatically generates action creators and action types based on the reducers you define.

On the other hand, createReducer is a lower-level function that allows you to define a reducer with a more manual approach. It requires you to specify the action types and how the state should change for each action.