Question

我正在尝试学习redux。
我正在尝试通过Redux添加收藏夹功能。
所以我创建了动作addFavoriteSPORTSs，reducers SPORTSReducer，然后在执行mapDispatchToProps和 mapStateToProps
当我单击心脏图标时，我正在会话存储窗口中添加收藏夹。sessionStorage.setItem（ “收藏夹值”， JSON.stringify（action.payload））;
但是问题是刷新后颜色没有留在心脏中。
我在componentDidMount中进行了调试，可以打印收藏夹获取项目值，但仍然无法维护。
你能告诉我如何解决它吗？
以便将来我自己修复。
在下面提供我的代码段

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

在安装组件时，您将检索收藏夹并通过调用prop方法来设置redux状态。您的组件将通过mapStateToProps接收此新状态，但是如果没有合适的生命周期方法（例如componentDidUpdate或componentWillReceiveProps），它将不会更新。

您可以查看生命周期方法here。

此外，您要在redux中更改状态，这是您要避免的事情。看到这一行：

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

对于这些任务，我还建议使用Redux中间件。您可以设置一个中间件，该中间件将在发生特定操作时写入会话存储，然后您也可以从中重新存储Redux。

redux的工作方式不适用于我的sessionStorage

1 个答案: