Redux add object to array

Question

I have the following problem...

I want to add an object to an array of objects using redux in my react-native application. I get this error message:

Invalid attempt to spread non-iterable instance


// my action

export function newTaskAction(){
  return{
    type: ADD_NEW_TASK,
    payload: {
      new: { id: '5', task:'test123'}
    }
  }
}



//my reducer

export default function taskReducer(state = initialUserState, action){
    switch (action.type)
    {
        case ADD_NEW_TASK :
            return {
                ...state,
                tasks: [...state.tasks, payload.new]
            }
        default:
            return state
    }




const store = createStore(allReducers, {
 tasks: [
   {id: "1", task: "React Native lernen"},
   {id: "2", task: "Redux lernen"},
   {id: "3", task: "Etwas lesen"},
   {id: "4", task: "Einkaufen gehen"}
 ],
 user: 'Frank'
});

what does state.tasks holdes?

Roy.B
– Roy.B

2019-04-28 10:58:46 +00:00
Commented Apr 28, 2019 at 10:58 — Roy.B
– Roy.B, Commented Apr 28, 2019 at 10:58
I added the current state to my question

maximus26
– maximus26

2019-04-28 11:01:03 +00:00
Commented Apr 28, 2019 at 11:01 — maximus26
– maximus26, Commented Apr 28, 2019 at 11:01
How did you resolve it? @maximus26

codesnerd
– codesnerd

2021-01-16 01:22:57 +00:00
Commented Jan 16, 2021 at 1:22 — codesnerd
– codesnerd, Commented Jan 16, 2021 at 1:22

N Fard · Accepted Answer · 2019-04-28 11:03:49Z

2

Change this line

[...state.tasks, payload.new]

to

tasks: [...state.tasks, action.payload.new]

answered Apr 28, 2019 at 11:03

N Fard

1,0991 gold badge15 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

N Fard Over a year ago

payload: { new: { id: '5', task:'test123'} } . change it to : payload:{ id: '5', task:'test123'} @maximus26

maximus26 Over a year ago

unfortunately no change

N Fard Over a year ago

you should remove new after the previous change from tasks: [...state.tasks, action.payload.new]. it will be tasks: [...state.tasks, action.payload] at the end. If returns error, tell us what error this is.

maximus26 Over a year ago

it still says Invalid attempt to spread non-iterable instance

Siavash Rostami · Accepted Answer · 2019-04-28 11:04:57Z

0

Isn't it supposed to be?

return { ...state, tasks: [...state.tasks, action.payload.new] }

missing action

answered Apr 28, 2019 at 11:04

Siavash Rostami

1,9334 gold badges18 silver badges33 bronze badges

9 Comments

Siavash Rostami Over a year ago

@maximus26 check your initialUserState , probably something wrong in there

maximus26 Over a year ago

its just an empty array...tasks:[]

Siavash Rostami Over a year ago

@maximus26 try putting console log and check action and store objects in the reducer. their content should show what's possibly wrong

Siavash Rostami Over a year ago

try this:

return console.log(action) || {                 ...state,                 tasks: [...state.tasks, action.payload.new]             }

Siavash Rostami Over a year ago

and please check if your other reducers are working well. if you have same problem all over the application, then it's probably related to middleware configuration lines.

|

HABEEB RAHMAN PT · Accepted Answer · 2019-04-29 07:09:47Z

0

Please use Object.assign

 case Actions.CART_ADD_ITEM: 
        return Object.assign({}, state, { tasks: [...state.tasks,  { id: '5', task:'test123'}] });

Please use the task list in View like this

const mapStateToProps = (state) => ({
tasksList: state.tasksReducer.tasks} 
);


<FlatList
    data={this.props.tasksList}/>

answered Apr 29, 2019 at 7:09

HABEEB RAHMAN PT

464 bronze badges

Comments

mycroft16 · Accepted Answer · 2019-07-25 22:41:44Z

0

In your initial state, if you have defined tasks: null, then when you try to do a spread operator on [ ...state.tasks ] it will throw an error because it is null. Instead define tasks: []. You didn't post that as part of your code examples, so only guessing based on when I've had that same error.

answered Jul 25, 2019 at 22:41

mycroft16

8352 gold badges11 silver badges29 bronze badges

Collectives™ on Stack Overflow

Redux add object to array

4 Answers 4

4 Comments

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related