NextJs应用路由SSR不清除redux上的旧数据?

57hvy0tb  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(99)

我有一个简单的项目,在app路由器上使用NextJs,我还使用redux/redux-toolkit进行状态管理,但我遇到了一些小问题。
例如,当我在“Home”上填充redux状态时,用户导航到不同的页面,例如“Ditto”,在“Home”上获取的数据仍然存在于redux状态中,即使我没有在第二页中获取这些数据。同样的事情,当用户从第二页返回“Home”时,我在第二页上获取的数据仍然存在于redux状态中。
为了让您给予理解,我创建了这个简单的CodeSandbox,您可以在其中检查. https://codesandbox.io/p/devbox/nextjs-redux-toolkit-z5x2tw
我使用<a>标签进行导航,因为这样做的目的是在用户每次导航到项目时获取数据。当用户导航到“Home”时,我们填充pokemons状态,当用户导航到“Ditto”时,我们只获取和填充pokemon(不带“s”)状态。

gopyfrb3

gopyfrb31#

您正在维护Redux状态服务器端,因此客户端所做的任何事情都有点无关紧要,无论是否是单页应用程序。如果您希望在导航到详细信息页面时将pokemons状态重置为[],并在导航到主页时将pokemon状态重置为{},则这些都是您需要手动管理的状态更改,当这些特定的动作在reducer中被分派和处理时。
范例:

const initialState: IGlobal = {
  name: "pokeapi.co",
  versionHash:
    versionHashEnv.length > 5 ? versionHashEnv.substring(0, 5) : versionHashEnv,
  loading: false,
  pokemon: {},
  pokemons: [],
};

export const global = createSlice({
  name: "global",
  initialState,
  reducers: {
    setLoading: (state, action: PayloadAction<boolean>) => {
      state.loading = action.payload;
    },
    setPokemon: (state, action: PayloadAction<IPokemon | {}>) => {
      state.pokemon = action.payload;
      state.pokemons = []; // <-- reset when setting pokemon data
    },
    setPokemons: (state, action: PayloadAction<IPokemons | []>) => {
      state.pokemons = action.payload;
      state.pokemon = {}; // <-- reset when setting pokemons array data
    },
  },
});

字符串

相关问题