How to Update my Todo using Redux and React - reactjs

Question

I have a problem in my redux based todolist , where adding to the todo and deleting works , but i am not able to update the todo. i am using immunity helpers , it is updating the next item in the list and sometimes returns object is undefined!
This is my EditTodo
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { editTodo } from '../../actions/editTodoActions'
class EditTodo extends Component {
constructor(props){
super(props)
this.state = {
id:this.props.match.params.id,
todo:this.props.todo[0].todo
}
}
onInputChange = (e) => {
const todo = e.target.value;
this.setState({
todo : todo
})
}
editTodo = (e) => {
e.preventDefault()
const todo = {
id : this.state.id,
todo: this.state.todo
}
this.props.editTodo(todo);
}
render() {
const id = this.props.match.params.id
console.log(this.props.todo)
console.log(this.props.todo[0].todo)
return (
<div>
<input className="todo" name="todo" onChange={this.onInputChange} value={this.state.todo} type="text" placeholder="enter todo" /> <br />
<button onClick={this.editTodo}>Submit </button>
</div>
)
}
}
const MapStateToProps = (state,ownProps) =>({
todo : state.todolist.filter((item) => item.id == ownProps.match.params.id)
})
const MapDispatchToProps = {
editTodo : editTodo
}
export default connect(MapStateToProps,MapDispatchToProps)(EditTodo)
This is Edit Todo Action
import { EDIT_TODO } from './types'
export function editTodo(newTodo){
return {
type: EDIT_TODO,
payload: {
todo: newTodo
}
}
}
This is my Reducer :
import { ADD_TODO,EDIT_TODO, DELETE_TODO } from '../actions/types'
import update from 'immutability-helper'
const todolist = [
{ id :1, todo:"hello team"}
]
function todolistReducer(state=todolist,{ type, payload }){
switch(type){
case ADD_TODO:
let newTodo = {
id: payload.todo.id,
todo:payload.todo.todo
};
return state.concat([newTodo]);
case EDIT_TODO:
console.log('edit todo called')
console.log(payload.todo.id)
return update(state, {
[payload.todo.id]: {
todo: {$set: payload.todo.todo}
}
});
// Now we know that foo is defined, we are good to go.
case DELETE_TODO:
console.log('delete reducer called')
return state.filter((item) => item.id != payload.id)
default:
return state
}
}
export default todolistReducer

Answer 1

The update method provided by immutability-helper accepts second parameter key as index of the object that need to be updated in the array.
In your case it's not working or updating the next object because the id's of the objects are defined starting from 1. Ideally before updating you should find the index of the object the need to be updated and then use the same index to update the object in the array of todos.
So I have created a utility to find out the index of the object need to be updated and then calling the update method
export const todolist = [
{ id :1, todo:"hello team"},
{ id :2, todo:"hello team 2"}
]
const updateObj = (list, id, value) => {
let index = list.findIndex(todo => todo.id === id)
if(index === -1) return list;
let updatedList = update(list, {
[index]: {
todo: {$set: value}
}
})
return updatedList;
}
console.log(updateObj(todolist, 2, "updated value"))
console.log(updateObj(todolist, 3, "updated value"))
In your example replace this below with EDIT_TODO case and use the above updateObj utility
case EDIT_TODO:
console.log('edit todo called')
console.log(payload.todo.id)
return updateObj(state, payload.todo.id, payload.todo.todo);
Here is a link to the sample project I have created. Though it doesn't have reducers implementation but then updating the object works as per your requirement using immutability-helpers update method.
Hope this helps.