Redux TypeError: 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 am a beginner integrating redux with my code but i am facing this error when i select a tag from auto tags it gives the error non-iterable instance. The deletion reducer works fine after testing by giving redux empty state a [{name:'ABC'}]
so please guide me in figuring out the issue with my addtags redux function.
First screen:
class Page2 extends React.Component {
componentDidMount(){
this.props.fetchTags();
}
handleSubmit = () => {
addItem(this.props.tags.currentTags);
ToastAndroid.show('Symptoms saved successfully', ToastAndroid.SHORT)
};
handleDelete = index => {
this.props.deleteTags(index)
}
handleAddition = suggestion => {
this.props.addTags(suggestion)
console.log(this.props.tags.currentTags)
}
render() {
return (
<View style={styles.container}>
<View style={styles.autocompleteContainer}>
<AutoTags // Text adding component with auto completion feature and bubble feature
suggestions={this.props.tags.storedTags}
tagsSelected={this.props.tags.currentTags}
handleAddition={this.handleAddition}
handleDelete={this.handleDelete}
placeholder="Add a Symptom.." />
</View>
<TouchableHighlight // wrapper for making views respond properly to touches
style={styles.button}
underlayColor="blue"
onPress={() => {this.props.navigation.navigate('Diagnosis'); this.handleSubmit();}}>
<Text style={styles.buttonText}>Search</Text>
</TouchableHighlight>
</View>
);
}
}
const mapStateToProps = (state) => {
return {
tags: state.tags,
}
}
const mapDispatchToProps = {
addTags,
deleteTags,
fetchTags
}
export default connect(mapStateToProps, mapDispatchToProps)(Page2);
Reducer:
import {ADD_TAGS,DELETE_TAGS , FETCH_TAGS,QUERY_RESULT } from '../actions/tags/tagsActionTypes'
import firebase from '../../config';
const db= firebase.firestore();// connect with firestore of firebase
let itemsRef = db.collection('datasetSymptom');
const initialState = {
currentTags: [],
storedTags:[],
result:[]
}
const tagsReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TAGS:
return {
...state,
currentTags: [...state.currentTags, action.payload]
};
break
case DELETE_TAGS:
const newArray = [...state.currentTags] //Copying state array
newArray.splice(action.payload,1);
//using splice to insert at an index
return {
...state,
currentTags: newArray //reassigning todos array to new array
}
break
case FETCH_TAGS:
const storedTags=[];
itemsRef.get().then(querySnapshot => {// fetching dataset Symptom collection all documents using snapshot
querySnapshot.docs.forEach(doc => {storedTags.push({'name':doc.id});});//on each and storing it in 'name' key : symptom name form as aked by autotags component
});
return {
storedTags: storedTags
}
break
default:
return state;
}
};
export default tagsReducer
function:
export const addTags = (tag_id) => {
return {
type: ADD_TAGS,
payload: tag_id
}
};

Answer 1

I had a similar error with my code since I too am using an array like you have for your currentTags. I was able to resolve my issue by adding conditional check in my reducer.
The issue is that you are trying to use spread operator for currentTags but in initialState it is empty. I think the below may be your solution and may solve your problem based on what worked for me. For your ADD_TAGS code, replace it with below:
case ADD_TAGS:
return currentTags ?
{
...state,
currentTags: [...state.currentTags, action.payload]
};
:
{
...state,
currentTags: [state.currentTags, action.payload]
};
break