Как мне сделать так, чтобы slice был для каждого компонента свой?

В React каждый компонент имеет свое состояние, которое управляется с помощью useState hook или this.state в классовых компонентах. Если вы хотите иметь для каждого компонента свой slice, то лучшим подходом будет использование библиотеки управления состоянием, такой как Redux.

Redux предоставляет возможность хранить состояние приложения в единственном объекте - store. Каждый компонент может подключаться к store и получать оттуда необходимые данные. Чтобы иметь для каждого компонента свой slice данных, вы можете использовать функцию createSlice из Redux Toolkit.

Вот пример того, как можно создать slice для каждого компонента:

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

const initialState = {
  data: [],
};

const yourComponentSlice = createSlice({
  name: 'yourComponent',
  initialState,
  reducers: {
    setData(state, action) {
      state.data = action.payload;
    },
  },
});

export const { setData } = yourComponentSlice.actions;
export default yourComponentSlice.reducer;

После того, как вы создали slice для компонента, вам нужно подключить его к store и использовать в компоненте. Для подключения компонента к store вы можете использовать функцию useSelector из React-Redux.

import React from 'react';
import { useSelector } from 'react-redux';
import { setData } from './yourComponentSlice';

const YourComponent = () => {
  const data = useSelector((state) => state.yourComponent.data);

  // Здесь можно использовать данные из вашего slice

  return (
    <div>
      <p>{data}</p>
    </div>
  );
};

export default YourComponent;

Таким образом, каждый компонент будет иметь свой собственный slice, который можно обновлять и получать данные из него. Это обеспечит более четкое и понятное управление состоянием вашего приложения в React.