How can I manage complex state in a TypeScript and Redux application?

How can I manage complex state in a TypeScript and Redux application?

You can manage complex state by using Redux Toolkit, which simplifies the setup and provides powerful tools like createSlice.

What are the benefits of using Redux Toolkit over traditional Redux?

Redux Toolkit reduces boilerplate code, provides a more intuitive API, and includes built-in support for immutability.

Can you show me an example of using createSlice?

Sure! Here's a simple example:

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

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

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

How do I integrate this slice into my store?

You can integrate it by importing the reducer into your store configuration:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});