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

57hvy0tb  于 2024-01-08  发布在  其他
关注(0)|答案(1)|浏览(115)

我有一个简单的项目,在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中被分派和处理时。
范例:

  1. const initialState: IGlobal = {
  2. name: "pokeapi.co",
  3. versionHash:
  4. versionHashEnv.length > 5 ? versionHashEnv.substring(0, 5) : versionHashEnv,
  5. loading: false,
  6. pokemon: {},
  7. pokemons: [],
  8. };
  9. export const global = createSlice({
  10. name: "global",
  11. initialState,
  12. reducers: {
  13. setLoading: (state, action: PayloadAction<boolean>) => {
  14. state.loading = action.payload;
  15. },
  16. setPokemon: (state, action: PayloadAction<IPokemon | {}>) => {
  17. state.pokemon = action.payload;
  18. state.pokemons = []; // <-- reset when setting pokemon data
  19. },
  20. setPokemons: (state, action: PayloadAction<IPokemons | []>) => {
  21. state.pokemons = action.payload;
  22. state.pokemon = {}; // <-- reset when setting pokemons array data
  23. },
  24. },
  25. });

字符串

展开查看全部

相关问题