What are Redux Toolkit slices in TypeScript?

What are Redux Toolkit slices in TypeScript?

Redux Toolkit slices are a way to manage state in a Redux application using TypeScript. They help organize your Redux logic by combining actions and reducers into a single function.

How do I create a slice in Redux Toolkit?

To create a slice, you can use the createSlice function from Redux Toolkit. You'll define the name, initial state, and reducers in an object.

Can you show me an example of a slice?

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 use this slice in my component?

You can use the slice in your component by importing the actions and the reducer. Use useDispatch to dispatch actions and useSelector to access the state.