时间戳

首页 > 解决方案 > React + Redux 状态在页面刷新时被删除

reactjs - React + Redux 状态在页面刷新时被删除

问题描述

我目前有一个组件可以从后端提取一副卡片，并尝试从这些卡片的值中创建一个图表。在第一次加载时，一切正常并且图表填充。然而，在刷新时，decks 属性似乎是未定义的（尽管 redux devtools 显示它仍然存在）。

使用效果：

useEffect(() => {
  getDecks();                      // sets "decks"
  populateData();
}, []);

  const populateData = () => {
    var data = [0, 0, 0, 0, 0];
    cardArray = decks[0].cards;                // crashes here on reload; decks is undef.

    ...
    createChart(data);
  };

export const getDecks = () => async (dispatch) => {
  try {
    const res = await axios.get("/api/decks");
    dispatch({
      type: GET_DECKS,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: DECK_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status },
    });
  }
};

甲板减速机的初始状态：

const initialState = {
  decks: [],
  currentCard: 0,
  loading: true,
  error: {},
  isFlipped: false,
};

我看过类似的帖子，这些帖子建议我将卡片组存储在本地存储中，但我还有其他调用 getDecks 的组件显示来自它们的数据，与此类似，没有任何问题。有没有人有任何提示或可能的原因为什么会这样做？谢谢。

标签： reactjsreduxreact-reduxuse-effect

解决方案

发现问题。redux 存储在刷新时消失显然很常见，因此将您的应用程序包装在持久存储（例如 redux-persist）中会自动为我解决问题。感谢大家的建议。

推荐阅读