Состояние Redux изменяется при редактировании локальной переменной из useSelector ()

Question

Я использую useSelector () для получения состояния, и когда я применяю какой-либо фильтр к локальной переменной состояния, мое глобальное состояние изменяется. Не уверен почему. Ниже приведен код.

const filterVacations = (employees, status) => {
    if(status === 'Approved') {
        employees.forEach(item => {
            item.vacations = item.vacations.filter(vac => vac.approved === true);

        });
    }
    else if(status === 'Unapproved') {
        employees.forEach(item => {
            item.vacations = item.vacations.filter(vac => vac.approved === false);

    });

    }
    return employees.filter(item => item.vacations.length > 0);
  }

и вызывается эта функция, как показано ниже:

const Vacations = () => {
    const state = useSelector((state:State) => state);
    const view = state.view;
    const filter = state.filter;
    const employees = state.employees;

    employees = filterVacations(employees, filter); 

    return (
      <>
      //some component...
      </>);

  }

Почему состояние изменяется здесь?

Answer 1

Я нашел проблему. useSelector вернет поверхностную копию вложенных объектов, отсюда и мутация. Решение заключается в глубоком копировании вручную.

Answer 2

Это потому, что вы не передаете значение, когда говорите const filter = state.filter;, а передаете его ссылку.

Например, рассмотрите Книжную полку с книгой JS поверх нее в Библиотеке. Когда вы посещаете Libraria, вам не дают копию книги, но ее местоположение. Так что если вы порвете страницу книги и сохраните ее на прежнем месте. Библиотекарь также может увидеть разорванную страницу. Но если вы не хотите, чтобы это произошло. Вам нужно получить копию книги и оторвать от нее страницы, в то время как книга на полке останется такой, как есть.

Поэтому, когда вы хотите сделать копию данных и сохранить ее в переменной, ES6 представила простой способ сделать это, чем раньше неуклюжий способ. так что const filter = state.filter;

станет этим const filter = [...state.filter]; // this makes copy of array