Как установить значение из полезной нагрузки в состояние Redux ReactJS

Question

У меня проблема с положительным значением от действия к состоянию, может быть, кто-то может мне помочь!

Как я могу изменить searchFilter ??Спасибо!

У меня есть действие (все это хорошо, 100%)

  console.log("SEARCH_FILTER_CHANGE", value);
  return {
    type: "SEARCH_FILTER_CHANGE",
    payload: value
  };
};

Я пишу следующий код здесь в редукторе

const INITAL_STATE = {
  films: [],
  searchFilter: "", // name or actors
  searchValue: "" // search value from input
};

export default (state = INITAL_STATE, { type, payload }) => {
  switch (type) {
    case "SEARCH_FILTER_CHANGE":
      return {
            // !!! MY PROBLEM IS ON THE NEXT LINE

        searchFilter: payload
      };
    default:
      return state;
  }
};

Answer 1

Так как один из основных принципов Redux - никогда не изменять состояние.Вы должны всегда проверять, что вы вернули новую копию.Следовательно, вы должны добавить оставшуюся часть, не переопределяя ее:

case "SEARCH_FILTER_CHANGE":
    return {
        ...state,
        searchFilter: payload
    };

Используя оператор распространения (...), вы можете копировать перечисляемые свойства из одного объекта в другой более лаконичным способом.И избегая изменения или переопределения вашего состояния.

Проверьте эту ссылку https://redux.js.org/recipes/using-object-spread-operator

Не стесняйтесь спрашивать дополнительную информацию в комментариях

Answer 2

Сначала давайте проверим, что делает редуктор !он возвращает новое состояние с действием.таким образом, объект, который вы возвращаете в редукторе, - новое состояние .Итак, мы должны сохранить все текущее состояние и изменить только специальное свойство, которое мы хотим, это можно сделать с помощью аргументов распространения.

case "SEARCH_FILTER_CHANGE":
return {
    ...state,
    searchFilter: payload
}

, чтобы мы изменили старое состояние на новое состояние.

если вы хотите получить доступ к своему состоянию в компоненте, просто подключите его к redux.

не стесняйтесь задавать дополнительные вопросы в комментарии.