Spread array of objects to array of objects react

Question

I am using redux with react and I am trying to append my array of objects gotten from my api to my redux state which is an array of objects

This is my reducer...

import { GET_BOOKS } from "../actions/types";
const initialState = {
  books: [
 0:{},
 1:{},
]
};

export default function(state = initialState, action) {
  switch (action.type) {
    case GET_BOOKS:
      console.log(action.payload.results);
      return { ...state };
    default:
      return state;
  }
}

My api is returning

results : [
0: {somevalue},
1: {somevalue}
]

I dont know how to spread the values into a new array.

Check this - https://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items — ravibagul91, Aug 24 '19 at 16:28
Your declaration of `initialState` has syntax errors. Please fix syntax errors (and preferably formatting) in your question so we can figure out what you're actually asking. Please also explain what you **want**, rather than trying to express what you want in terms of the solution you're failing to implement. — Steve, Aug 24 '19 at 16:31

Pranav C Balan · Accepted Answer · 2019-08-24T17:42:48.510

1

Simply assign the property and it will overwrite the old one.

export default function(state = initialState, action) {
  switch (action.type) {
    case GET_BOOKS:
      console.log(action.payload.results);
      // spread current state and inaddition to that set new books data
      // which overwrites books property from old state
      return { ...state, books : action.payload.results };
      // spread --^^^^^^^^^^^^^^^^^^^^^^^^^^^---
    default:
      return state;
  }
}

UPDATE : If you want to concatenate it with existing then do something like this.

export default function(state = initialState, action) {
  switch (action.type) {
    case GET_BOOKS:
      console.log(action.payload.results);
      return { ...state, books : [...state.books, ...action.payload.results] };
    default:
      return state;
  }
}

FYI : The ...state part is for copying other state properties(assumes there exists other state values)

edited Aug 24 '19 at 17:42

answered Aug 24 '19 at 16:08

Pranav C Balan

113,687
23
165
188

I cant do that because the api is a paginator so it returns more results but doesnt return the whole list again – NduJay Aug 24 '19 at 16:18
you need to provide more information in your question then – tytyf Aug 24 '19 at 16:25
Assuming that the payload results aren't already in the books array you can simply replace action.payload.books above with [...action.payload.results, ...state.books] – Alex Broadwin Aug 24 '19 at 16:49
@AlexBroadwin : I think you want to concatenate, then use updated solution – Pranav C Balan Aug 24 '19 at 17:44
The problem is that the result from the payload is a array of objets so it just makes the books an array of objects inside an array – NduJay Aug 24 '19 at 18:22

score 0 · Answer 2 · answered Aug 24 '19 at 16:51

0

You need to concat current state and data coming from api

return {  books: [...state.books, ...action.payload.results] };

Complete Code

import { GET_BOOKS } from "../actions/types";
const initialState = { books: [] };

export default (state: Object = initialState, action: Object) => {
  switch (action.type) {
    case GET_BOOKS:
      return { books: [...state.books, ...action.payload.results] };
    default:
      return state;
  }
};

answered Aug 24 '19 at 16:51

Mehran Khan

3,616
1
13
10

The problem is that the result from the payload is a array of objets so it just makes the books an array of objects inside an array – NduJay Aug 24 '19 at 18:23

Spread array of objects to array of objects react

2 Answers2