Как записать полученные объекты в массив в Redux

Question

У меня есть API который я перебираю и мне нужно записать полученный объекты в массив чтобы потом его перебирать,но у меня никак не получается записать все объекты в массив записывается только последний. Но я получаю последний объект записанным в этот state

Action В котором я перебираю API

import {ADD_POKEMONS} from "./actionTypes";

export function getPokemons(listEachPokemon){
    return{
        type: ADD_POKEMONS,
        listEachPokemon
    }
}

export function fetchPokemons(url){
    return (dispatch) =>{
        fetch(url)
            .then((response) => {
                return response.json();
            })
            .then((listPokemons)=>{
            listPokemons.results.forEach((aboutPokemon) => {
                let aboutPokemonUrl = aboutPokemon.url;
                fetch(aboutPokemonUrl)
                .then((response) => {
                    return response.json();
                })
                .then((listEachPokemon) => {
                    dispatch(getPokemons(listEachPokemon))
                })
             })
            })
    }
}

Reducer

import { ADD_POKEMONS } from "../Action/actionTypes";

const initialState ={
    pokemonList: []
}

export default function listPokemons(state = initialState, action){
    switch(action.type){
        case ADD_POKEMONS:
            return{
                ...state, pokemonList: action.listEachPokemon
            }
        default:
            return state
    }
}

Спасибо

Answer 1

Ничего удивительного, на каждое значение массива вы перезаписываете состояние в цикле, а не добавляете новое. Нужно исправить:

case ADD_POKEMONS:
            return{
                ...state, pokemonList: state.pokemonList.concat(action.listEachPokemon)
            }

Answer 2

В редьюсере есть противоречивый код, который не сохраняет каждое новое значение в массив, а просто перезаписывает его. Вот этот код:

return { ...state, pokemonList: action.listEachPokemon }

Чтобы добавить элемент в массив, и при этом не вызвать мутации, можно пушить в массив через Spread syntax (создает новый массив на основе существующего, не изменяя исходный, а значит не вызывает мутации). В вашем случае должно получиться как-то так:

return { ...state, pokemonList: [...state.pokemonList, action.listEachPokemon] }

P.S.: есть и альтернативный вариант через concat (он возвращает новый массив, не изменяя исходный, а значит не вызывает мутации).

БЛОГ НА HUSL

Как записать полученные объекты в массив в Redux

Ответы (2 шт):