Redux 工具包返回额外的对象

Question

我正在像这样在 redux 工具包上保存一个数组

我的切片：

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

import { userGame } from './types';

const initialState: userGame = {
  game_id: '',
  game_name: '',
  game_platform_id: '',
  image_url: '',
  platform_name: '',
  image_cover: '',
};

export const userGamesSlice = createSlice({
  name: 'userGames',
  initialState,
  reducers: {
    saveUserGames: (state, action: PayloadAction<userGame[]>) => {
      const games = action.payload.map((game) => {
        const image_url_split = game.image_url.split('/');
        const image_filename = image_url_split[image_url_split.length - 1];
        game.image_url = `https:${game.image_url}`;
        game.image_cover = `https://images.igdb.com/igdb/image/upload/t_cover_big/${image_filename}`;
        return game;
      });
      console.log('file: userGamesSlice.ts ~ line 26 ~ games ~ games', games);
      return { ...state, ...games };
    },
  },
});

export const { saveUserGames } = userGamesSlice.actions;

export default userGamesSlice.reducer;

在日志上看起来不错，但是，当我使用选择器获取它时，它带有一个额外的对象

{"0": {"game_id": "7cc52df0-0456-4c10-b928-a98ec3035793", "game_name": "The Monster Inside", "game_platform_id": "07834cd8-b0d7-4528-880d-617fb8fe20c4", "image_cover": "https://images.igdb.com/igdb/image/upload/t_cover_big/co2jpu.jpg", "image_url": "https://images.igdb.com/igdb/image/upload/t_thumb/co2jpu.jpg", "platform_name": "PC (Microsoft Windows)"}, "1": {"game_id": "7cc52df0-0456-4c10-b928-a98ec3035793", "game_name": "The Monster Inside", "game_platform_id": "0dce27c6-be8c-4dfb-afd1-437b14d35a68", "image_cover": "https://images.igdb.com/igdb/image/upload/t_cover_big/co2jpu.jpg", "image_url": "https://images.igdb.com/igdb/image/upload/t_thumb/co2jpu.jpg", "platform_name": "Linux"}, "2": {"game_id": "7cc52df0-0456-4c10-b928-a98ec3035793", "game_name": "The Monster Inside", "game_platform_id": "13539562-d3fd-4f68-8254-a70d88a7658b", "image_cover": "https://images.igdb.com/igdb/image/upload/t_cover_big/co2jpu.jpg", "image_url": "https://images.igdb.com/igdb/image/upload/t_thumb/co2jpu.jpg", "platform_name": "Mac"}, "3": {"game_id": "458e2c59-fa1f-421e-9d1e-68c682b6915c", "game_name": "Super Robot Wars V", "game_platform_id": "36d31710-8eb0-497c-a689-37976bed5c9f", "image_cover": "https://images.igdb.com/igdb/image/upload/t_cover_big/co2wjl.jpg", "image_url": "https://images.igdb.com/igdb/image/upload/t_thumb/co2wjl.jpg", "platform_name": "PC (Microsoft Windows)"}, "4": {"game_id": "458e2c59-fa1f-421e-9d1e-68c682b6915c", "game_name": "Super Robot Wars V", "game_platform_id": "41a6ee47-76b7-425c-b6ab-e4a0b53280ca", "image_cover": "https://images.igdb.com/igdb/image/upload/t_cover_big/co2wjl.jpg", "image_url": "https://images.igdb.com/igdb/image/upload/t_thumb/co2wjl.jpg", "platform_name": "PlayStation Vita"}, "5": {"game_id": "25307284-2dbb-46c9-a16f-b33f65e6dd7b", "game_name": "Frame of Mind", "game_platform_id": "cb0cc229-b979-4f20-ae6c-3aad48fbcae8", "image_cover": "https://images.igdb.com/igdb/image/upload/t_cover_big/co2nvz.jpg", "image_url": "https://images.igdb.com/igdb/image/upload/t_thumb/co2nvz.jpg", "platform_name": "PC (Microsoft Windows)"}, "6": {"game_id": "18e8e92e-73aa-4675-b120-20e7534cf3ae", "game_name": "Dungescape!", "game_platform_id": "cfcc232e-1f24-4110-bf48-936e7d8e7836", "image_cover": "https://images.igdb.com/igdb/image/upload/t_cover_big/co4grq.jpg", "image_url": "https://images.igdb.com/igdb/image/upload/t_thumb/co4grq.jpg", "platform_name": "PC (Microsoft Windows)"}, "7": {"game_id": "458e2c59-fa1f-421e-9d1e-68c682b6915c", "game_name": "Super Robot Wars V", "game_platform_id": "d11a01c5-fbae-48c5-ba6b-21b138b05c01", "image_cover": "https://images.igdb.com/igdb/image/upload/t_cover_big/co2wjl.jpg", "image_url": "https://images.igdb.com/igdb/image/upload/t_thumb/co2wjl.jpg", "platform_name": "PlayStation 4"}, "8": {"game_id": "458e2c59-fa1f-421e-9d1e-68c682b6915c", "game_name": "Super Robot Wars V", "game_platform_id": "f1688764-6096-418f-86e1-07b30eabacc3", "image_cover": "https://images.igdb.com/igdb/image/upload/t_cover_big/co2wjl.jpg", "image_url": "https://images.igdb.com/igdb/image/upload/t_thumb/co2wjl.jpg", "platform_name": "Nintendo Switch"}, "game_id": "", "game_name": "", "game_platform_id": "", "image_cover": "", "image_url": "", "platform_name": ""}

这是我的

Answer 1

几件事：

(1) 您正在保存 javascript 对象内部的所有内容，而不是数组，这意味着所有项目都存储为键值对（例如 game_id: ''）。此外，不允许重复键。

(2) 在你的 reducer saveUserGames 中，你使用下面的代码 return { ...state, ...games }; 将对象 games 和它带到你的初始状态。您在这里所做的实际上是在没有键的情况下向对象添加一个值，因此 javascript 为它提供了您所看到的键（例如 0、1、2, 等等)

要解决您的问题，您可以执行以下操作之一：

(1)如果你想使用数组，把你的初始状态改成数组；但是，这样做将不允许您像现在这样使用键值对。

(2) 我建议让你的初始状态为一个空对象，并将你的 reducer 中的任何新对象添加到你的初始状态，如下所示：state.userGame[game_id] = [action.payload].

Redux 工具包返回额外的对象

Redux toolkit returning extra object

react-native

redux-toolkit