Redux toolkit returning extra object-CodePudding

I'm saving an array on redux toolkit like this

my slice:

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;

it seems fine on the log but, when I get it using selector it comes with an extra object

{"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": ""}

this is my

CodePudding user response：

A few things:

(1) You're saving all of inside of a javascript object, not an array, which means that all items are stored as a key, value pair (e.g. game_id: ''). Also, duplicate keys are not allowed.

(2) In your reducer, saveUserGames, you take the object games and it to your initial state with the following piece of code, return { ...state, ...games };. What you're doing here is essentially adding a value to your object without a key, so javascript is giving it the keys you're seeing (e.g. 0, 1, 2, etc.)

To fix your problem you can do one of the following:

(1) If you want to use an array, change your initial state to an array; however, doing so will not allow you to use key, value pairs like you currently are.

(2) I suggest making your initial state an empty object and adding any new objects in your reducer to your initial state like so: state.userGame[game_id] = [action.payload].