Как сделать так, чтобы состояние redux toolkit было в одном slice, но применялось к разным элементам страницы?

Для того чтобы иметь один slice в Redux Toolkit, который применяется к разным элементам страницы, можно воспользоваться техникой нормализации данных. Нормализация данных позволяет хранить данные в виде единого объекта, сводя к минимуму дублирование данных и упрощая доступ к ним из разных частей приложения.

Для реализации подобной структуры в Redux Toolkit, можно использовать создание сущностей, например, если у вас есть список пользователей и список задач, вы можете создать два независимых среза (slices) для пользователей и задач. В каждом срезе вы можете хранить данные в нормализованном виде.

Например, вы можете иметь следующую структуру для пользователей:

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

const usersSlice = createSlice({
  name: 'users',
  initialState: {
    entities: {},
    ids: []
  },
  reducers: {
    addUser(state, action) {
      state.entities[action.payload.id] = action.payload;
      state.ids.push(action.payload.id);
    },
    updateUser(state, action) {
      state.entities[action.payload.id] = { ...state.entities[action.payload.id], ...action.payload };
    }
  }
});

export const { addUser, updateUser } = usersSlice.actions;
export default usersSlice.reducer;

И аналогично для задач:

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

const tasksSlice = createSlice({
  name: 'tasks',
  initialState: {
    entities: {},
    ids: []
  },
  reducers: {
    addTask(state, action) {
      state.entities[action.payload.id] = action.payload;
      state.ids.push(action.payload.id);
    },
    updateTask(state, action) {
      state.entities[action.payload.id] = { ...state.entities[action.payload.id], ...action.payload };
    }
  }
});

export const { addTask, updateTask } = tasksSlice.actions;
export default tasksSlice.reducer;

Затем, в компонентах вы можете использовать соответствующие селекторы для получения данных из хранилища для разных элементов страницы:

import { useSelector } from 'react-redux';

const UsersList = () => {
  const users = useSelector(state => state.users.ids.map(id => state.users.entities[id]));

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

const TasksList = () => {
  const tasks = useSelector(state => state.tasks.ids.map(id => state.tasks.entities[id]));

  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
};

Таким образом, используя нормализацию данных и разделяя их на отдельные срезы, можно легко управлять состоянием в Redux Toolkit с минимальным дублированием данных и применять их к разным элементам страницы.