Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method React Native

Question

I'm trying to test a useState value of and object in react native with redux. I got this error when i have to store a value in state using react-Redux..
I want to store notes and numbers in two arrasy with react native redux and perform both action with single store.Any help is greatly appreciated

Component:

import React, { useState } from 'react'
import { View, StyleSheet } from 'react-native'
import { IconButton, TextInput, FAB } from 'react-native-paper'
import Header from '../components/Header'

function AddNote({ navigation }) {
  const [noteTitle, setNoteTitle] = useState('')
  const [noteValue, setNoteValue] = useState('')

  function onSaveNote() {
    navigation.state.params.addNote({ noteTitle, noteValue })
    navigation.goBack();
  }
  return (
    <>
      <Header titleText='Add a new note' />
      <IconButton
        icon='close'
        size={25}
        color='white'
        onPress={() => navigation.goBack()}
        style={styles.iconButton}
      />
      <View style={styles.container}>
        <TextInput
          label='Add Title Here'
          value={noteTitle}
          mode='outlined'
          onChangeText={setNoteTitle}
          style={styles.title}
        />
        <TextInput
          label='Add Note Here'
          value={noteValue}
          onChangeText={setNoteValue}
          mode='flat'
          multiline={true}
          style={styles.text}
          scrollEnabled={true}
          returnKeyType='done'
          blurOnSubmit={true}
        />
        <FAB
          style={styles.fab}
          small
          icon='check'
          disabled={noteTitle == '' ? true : false}
          onPress={() => onSaveNote()}
        />
      </View>
    </>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingHorizontal: 20,
    paddingVertical: 20
  },
  iconButton: {
    backgroundColor: 'rgba(46, 113, 102, 0.8)',
    position: 'absolute',
    right: 0,
    top: 40,
    margin: 10
  },
  title: {
    fontSize: 24,
    marginBottom: 20
  },
  text: {
    height: 300,
    fontSize: 16
  },
  fab: {
    position: 'absolute',
    margin: 20,
    right: 0,
    bottom: 0
  }
})

export default AddNote

Reducers:

import remove from 'lodash.remove'

// Action Types

export const ADD_NOTE = 'ADD_NOTE'
export const DELETE_NOTE = 'DELETE_NOTE'
export const ADD_NUMBER = 'ADD_NUMBER'
export const DELETE_NUMBER = 'DELETE_NUMBER'
    
// Action Creators

let noteID = 0
let numberID = 0

export function addnote(note) {
  return {
    type: ADD_NOTE,
    id: noteID++,
    note
  }
}

export function deletenote(id) {
  return {
    type: DELETE_NOTE,
    payload: id
  }
}

export function addnumber(number) {
  return {
    type: ADD_NUMBER,
    id: numberID++,
    number
  }
}

export function deletenumber(id) {
  return {
    type: DELETE_NUMBER,
    payload: id
  }
}

// reducer    
const INITIAL_STATE = {
  note: [],   //note array for save notes
  number: []   // number array for save numbers
};
function notesReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case ADD_NOTE:
      return [
        ...state,
        {
          id: action.id,
          note: action.note
        }
      ]

    case DELETE_NOTE:
      const deletedNewArray = remove(state, obj => {
        return obj.id != action.payload
      })
      return deletedNewArray

    case ADD_NUMBER:
      return [
        ...state,
        {
          id: action.id,
          number: action.number
        }
      ]

    case DELETE_NUMBER:
       deletedNewArray = remove(state, obj => {
        return obj.id != action.payload
      })
      return deletedNewArray

    default:
      return state
  }
}

export default notesReducer    

So What should i do it.. Please Help Me..

Answer 1

The reducer must return the new state instead of the updated parameter:

// reducer    
const INITIAL_STATE = {
  note: [],   //note array for save notes
  number: []   // number array for save numbers
};

function notesReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case ADD_NOTE:
      return {
        ...state,
        note: [
           ...state.note,
           {
               id: action.id,
               note: action.note
           }
        ]
      };

    case DELETE_NOTE:
      const note = remove(state.note, obj => obj.id != action.payload);

      return {...state, note};

    case ADD_NUMBER:
      return {
        ...state,
        number: [
            ...state.number,
            {
              id: action.id,
              number: action.number
            }
        ]
      };

    case DELETE_NUMBER:
       const number = remove(state.number, obj => obj.id != action.payload);

       return {...state, number}

    default:
      return state
  }
}