Редукционный способ не работает для моего sessionStorage

Question

• Я пытаюсь изучить избыточность.
• Я пытаюсь добавить функциональность избранного через Redux.
• , поэтому я создал действия addFavoriteSPORTSs, редукторы SPORTSReducer, а затем отправил в tab-demo.js, где я делаю mapDispatchToProps и mapStateToProps
• , когда я щелкаю значок сердца, я добавляю избранное в хранилище сессии window.sessionStorage.setItem ("FavoritesValues", JSON.stringify (action.payload));
• но проблема в том, что после обновления цвет не остается в сердце.
• Я отладил в componentDidMount, и я могу напечатать избранное, получить значение элемента, но все еще не поддерживается.
• Можете ли вы сказать мне, как это исправить.
• , чтобы в будущем я сам это исправил.
• предоставив мой фрагмент кода ниже

https://codesandbox.io/s/5x02vjjlqp

actions / index.js

import {
  ADD_SPORTS,
  DELETE_SPORTS,
  DELETE_ALL_SPORTS,
  ADD_ALL_SPORTSS
} from "./types";

export const addFavoriteSPORTSs = data => ({
  type: ADD_ALL_SPORTSS,
  payload: data
});

actions / types.js

export const ADD_ALL_SPORTSS = "ADD_ALL_SPORTSS";

tab-demo.js

import { deleteAllPosts, addFavoriteSPORTSs } from "./actions/index";

  componentDidMount() {
    let favorites = window.sessionStorage.getItem("favoriteValues");
    console.log("componentDidMount favorites--->", favorites);

    if (favorites) {
      this.props.addFavoriteSPORTSs(JSON.parse(favorites));
    }
    // debugger;
  }


const mapDispatchToProps = dispatch => {
  return {
    onDeleteAllSPORTS: () => {
      // console.log("called");
      dispatch(deleteAllPosts());
    },
    addFavoriteSPORTSs: data => {
      dispatch(addFavoriteSPORTSs(data));
    }
  };
};

const mapStateToProps = state => {
  return {
    SPORTSs: state.SPORTSs
  };
};

export default withStyles(styles)(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(ScrollableTabsButtonForce)
);

SPORTSReducer.js

switch (action.type) {
    case ADD_ALL_SPORTSS:
      window.sessionStorage.setItem(
        "favoriteValues",
        JSON.stringify(action.payload)
      );
      return action.payload;

    case ADD_SPORTS:
      state = state.filter(comment => comment.id !== action.payload.id);
      value = [...state, action.payload];
      console.log("ADD_SPORTS state--->", state);
      console.log("ADD_SPORTS value--->", value);
      //return [...state, action.payload];

      // state = state.filter(SPORTS => SPORTS.SPORTSID !== action.payload.SPORTSID);
      // value = [...state, action.payload]
      window.sessionStorage.setItem("favoriteValues", JSON.stringify(value));
      console.log("JSON.stringify(value)--->", JSON.stringify(value));
      console.log("state--->", state);
      return state;

Answer 1

Когда компонент монтируется, вы извлекаете ваши привилегии и устанавливаете состояние избыточности, вызывая свой метод проп.Ваш компонент получит это новое состояние через mapStateToProps, но не будет обновляться без подходящего метода жизненного цикла, такого как componentDidUpdate или componentWillReceiveProps.

Вы можете проверить методы жизненного цикла здесь .

Кроме того, вы изменяете свое состояние в избыточности, чего вы хотите избежать.Смотрите эту строку:

state = state.filter(comment => comment.id !== action.payload.id);

Я бы также рекомендовал промежуточное ПО Redux для этих задач.Вы можете настроить промежуточное программное обеспечение, которое будет записывать в хранилище сеансов всякий раз, когда происходит определенное действие, и затем вы можете переназначить Redux из этого.