Почему стейт мутирует?

Question

[Павел Орловский]

Почему стейт слайса мутирует в redux toolkit. leftBoundPage и rightBoundPage динамически берет вначале кусок инишиал стейта с 0 элемента по 5 (не включительно). Нажимая на страницу 2, leftBoundPage и rightBoundPage становится 5 и 10 соотвественно. Но массив мутировал и стал не 10 элементов, а 5 и у этого массива, 5 элемента уже нет , а 10 темболее. Почему мутирует стейт?

paginated(state, action) {
      state.items = state.items.slice(
        action.payload.leftBoundPage,
        action.payload.rightBoundPage
      );
    },

Полный код

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

interface QuestionItem {
  id: string;
  name: string;
  image: string;
  amount: number;
  difficulty: number;
  description: string;
}

export interface QuestionsState {
  items: QuestionItem[];
  pages: number | null;
}

const initialState: QuestionsState = {
  items: [
    {
      id: "0",
      name: "css",
      image: "https://itproger.com/img/courses/1476977488.jpg",
      amount: 1,
      difficulty: 0,
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quis aperiam voluptates molestias hic! Necessitatibus velit provident, pariatur, quisquam, obcaecati accusantium exercitationem perspiciatis optio expedita alias mollitia fugit animi modi.",
    },
    {
      id: "1",
      name: "css",
      image: "https://itproger.com/img/courses/1476977488.jpg",
      amount: 2,
      difficulty: 1,
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quis aperiam voluptates molestias hic! Necessitatibus velit provident, pariatur, quisquam, obcaecati accusantium exercitationem perspiciatis optio expedita alias mollitia fugit animi modi.",
    },
    {
      id: "2",
      name: "css",
      image: "https://itproger.com/img/courses/1476977488.jpg",
      amount: 3,
      difficulty: 2,
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quis aperiam voluptates molestias hic! Necessitatibus velit provident, pariatur, quisquam, obcaecati accusantium exercitationem perspiciatis optio expedita alias mollitia fugit animi modi.",
    },
    {
      id: "3",
      name: "css",
      image: "https://itproger.com/img/courses/1476977488.jpg",
      amount: 4,
      difficulty: 0,
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quis aperiam voluptates molestias hic! Necessitatibus velit provident, pariatur, quisquam, obcaecati accusantium exercitationem perspiciatis optio expedita alias mollitia fugit animi modi.",
    },
    {
      id: "4",
      name: "css",
      image: "https://itproger.com/img/courses/1476977488.jpg",
      amount: 5,
      difficulty: 1,
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quis aperiam voluptates molestias hic! Necessitatibus velit provident, pariatur, quisquam, obcaecati accusantium exercitationem perspiciatis optio expedita alias mollitia fugit animi modi.",
    },
    {
      id: "5",
      name: "css",
      image: "https://itproger.com/img/courses/1476977488.jpg",
      amount: 6,
      difficulty: 0,
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quis aperiam voluptates molestias hic! Necessitatibus velit provident, pariatur, quisquam, obcaecati accusantium exercitationem perspiciatis optio expedita alias mollitia fugit animi modi.",
    },
    {
      id: "6",
      name: "css",
      image: "https://itproger.com/img/courses/1476977488.jpg",
      amount: 7,
      difficulty: 1,
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quis aperiam voluptates molestias hic! Necessitatibus velit provident, pariatur, quisquam, obcaecati accusantium exercitationem perspiciatis optio expedita alias mollitia fugit animi modi.",
    },
    {
      id: "7",
      name: "css",
      image: "https://itproger.com/img/courses/1476977488.jpg",
      amount: 8,
      difficulty: 2,
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quis aperiam voluptates molestias hic! Necessitatibus velit provident, pariatur, quisquam, obcaecati accusantium exercitationem perspiciatis optio expedita alias mollitia fugit animi modi.",
    },
    {
      id: "8",
      name: "css",
      image: "https://itproger.com/img/courses/1476977488.jpg",
      amount: 9,
      difficulty: 0,
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quis aperiam voluptates molestias hic! Necessitatibus velit provident, pariatur, quisquam, obcaecati accusantium exercitationem perspiciatis optio expedita alias mollitia fugit animi modi.",
    },
    {
      id: "9",
      name: "css",
      image: "https://itproger.com/img/courses/1476977488.jpg",
      amount: 10,
      difficulty: 1,
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quis aperiam voluptates molestias hic! Necessitatibus velit provident, pariatur, quisquam, obcaecati accusantium exercitationem perspiciatis optio expedita alias mollitia fugit animi modi.",
    },
  ],
  pages: null,
};

const questionsSlice = createSlice({
  name: "questions",
  initialState,
  reducers: {
    setPages(state, action) {
      state.pages = action.payload;
    },
    paginated(state, action) {
      state.items = state.items.slice(
        action.payload.leftBoundPage,
        action.payload.rightBoundPage
      );
    },
  },
});

export const { paginated, setPages } = questionsSlice.actions;

export default questionsSlice.reducer;

Comments

[Алексей Уколов]

Конкретизируйте свой вопрос, пока что он не особо понятен.

Answer 1

[Алексей]

Павел Орловский вы же сами в стейт записываете результат метода slice:

state.items = state.items.slice(
        action.payload.leftBoundPage,
        action.payload.rightBoundPage
      );

Тут slice первый раз возвращает новый массив из items от индекса leftBoundPage (0) до rightBoundPage (5, не включая его), т.е. из 10 изначальных элементов остаются первые 5 и вы перезаписываете этими элементами старые items.

Здесь вам надо не менять items, а написать селектор, который будет возвращать часть items на основании leftBoundPage и rightBoundPage