Redux updating object in an array (React-Native) - reactjs

Question

Trying to learn Redux. I am building a list app. From the home screen you can see all your lists and click on one to update. You can also create a new list.
So I've made a check to see if you navigate to the list component with data, the action upon 'save' will be UPDATE_LIST. If you navigate to the list component with no data, the action upon 'save' will be NEW_LIST. The new list works but the update does not. If you need to see more files, let me know. Thank you.
This is the list component:
import React from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import { connect } from 'react-redux';
import { newList, updateList } from '../store/tagActions';
class List extends React.Component {
constructor(props){
super(props);
this.state = {
title: '',
tags: [],
mentions: [],
tagValue: '',
mentionValue: '',
id: null
}
}
submitTag = (text) => {
this.setState({
tags: [
...this.state.tags,
text
],
tagValue: ''
})
}
submitMention = (text) => {
this.setState({
mentions: [
...this.state.mentions,
text
],
mentionValue: ''
})
}
componentDidMount() {
if (this.props.route.params.data !== null) {
const { title, tags, mentions, id } = this.props.route.params
this.setState({
id: id,
title: title,
tags: tags,
mentions: mentions
})
} else return
}
save = () => {
if (this.props.route.params.data !== null) {
this.props.updateList(
id = this.state.id,
title = this.state.title,
tags = this.state.tags,
mentions = this.state.mentions
)
} else {
this.props.newList(
title = this.state.title,
tags = this.state.tags,
mentions = this.state.mentions
)
}
this.props.navigation.navigate('Home');
}
render() {
return (
<View style={styles.container}>
<TextInput //==================================== TITLE
value={this.state.title}
style={styles.title}
placeholder='add Title..'
onChangeText={text => this.setState( {title: text} ) }
/>
<View style={styles.allTags}>
<Text>{this.state.id}</Text>
<View style={styles.tagsList}>
{
this.state.tags.map((tag => (
<Text key={tag} style={styles.tags}>#{tag}</Text>
)))
}
</View>
<View style={styles.mentionsList}>
{
this.state.mentions.map((mention => (
<Text key={mention} style={styles.mentions}>#{mention}</Text>
)))
}
</View>
</View>
<TextInput // =================================== TAGS
value={ this.state.tagValue }
style={styles.tagsInput}
placeholder='add #Tags..'
placeholderTextColor = "#efefef"
autoCorrect = { false }
autoCapitalize = 'none'
onChangeText={text => this.setState( {tagValue: text}) }
onSubmitEditing={() => this.submitTag(this.state.tagValue)}
/>
<TextInput //===================================== MENTIONS
value={ this.state.mentionValue }
style={styles.mentionsInput}
placeholder='add #Mentions..'
placeholderTextColor = "#efefef"
autoCorrect = { false }
autoCapitalize = 'none'
onChangeText={text => this.setState( {mentionValue: text})}
onSubmitEditing= {() => this.submitMention(this.state.mentionValue)}
/>
<Button
title='save'
onPress={() => {
this.save();
}
}
/>
</View>
)
}
}
const mapStateToProps = (state) => {
return { state }
};
export default connect(mapStateToProps, { newList, updateList }) (List);
tagActions.js
let nextId = 0;
export const newList = (title, tags, mentions) => (
{
type: 'NEW_LIST',
payload: {
id: ++nextId,
title: title,
tags: tags,
mentions: mentions
}
}
);
export const updateList = (title, tags, mentions, id) => (
{
type: 'UPDATE_LIST',
payload: {
id: id,
title: title,
tags: tags,
mentions: mentions
}
}
);
tagReducer.js:
const tagReducer = (state = [], action) => {
switch (action.type) {
case 'NEW_LIST':
//add tags and mentions later
const { id, title, tags, mentions } = action.payload;
return [
...state,
{
id: id,
title: title,
tags: tags,
mentions: mentions
}
]
case 'UPDATE_LIST':
return state.map((item, index) => {
if (item.id === action.payload.id) {
return {
...item,
title: action.payload.title,
tags: action.payload.tags,
mentions: action.payload.mentions
}
} else { return item }
})
default:
return state;
}
};
export default tagReducer;

Answer 1

By sending args like so
export const updateList = (title, tags, mentions, id) => (
In the scope of the function, the first arg that the function will be called with gonna be title, and even by doing something like this
this.props.updateList(
id = this.state.id,
title = this.state.title,
tags = this.state.tags,
mentions = this.state.mentions
)
what you sent as this.state.id, gonna be evaluate as title. (not python alert)
so you have two options, either organize args as in function, or send object with keys
this.props.updateList({
id: this.state.id,
title: this.state.title,
tags: this.state.tags,
mentions: this.state.mentions
})
export const updateList = ({title, tags, mentions, id}) => (
Anyhow, of course you can use array as data structure for state, sorry I mislead you
const tagReducer = (state = [], action) => {
switch (action.type) {
const { id, title, tags, mentions } = action.payload || {};
case 'NEW_LIST':
//add tags and mentions later
return [ ...state, { id, title, tags, mentions } ]
case 'UPDATE_LIST':
return state.map(item =>
item.id === id ? { ...item, title, tags, mentions} : item
)
default: return state;
}
};
export default tagReducer;