Как обновить мой Todo с помощью Redux и React - PullRequest
Новая
       72

Как обновить мой Todo с помощью Redux и React

0 голосов
/ 18 июня 2020

У меня проблема с моим todolist на основе redux, где добавление к todo и удаление работают, но я не могу обновить todo. Я использую помощники иммунитета, он обновляет следующий элемент в списке и иногда возвращает объект undefined!

Это мой 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)

Это Edit Todo Action 

import { EDIT_TODO } from './types'

export function editTodo(newTodo){
        return {
            type: EDIT_TODO,
            payload: {
                todo: newTodo
            }
        }
}

Это мой Редуктор: 

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

1 Ответ

1 голос
/ 18 июня 2020

Метод update, предоставляемый immutability-helper, принимает второй ключ параметра как index объекта, который необходимо обновить в массиве.

В вашем случае он не работает или не обновляет следующий объект, потому что идентификаторы объектов определены, начиная с 1. В идеале перед обновлением вы должны найти индекс объекта, который необходимо обновить, а затем использовать тот же индекс для обновления объекта в массиве todo s.

Итак, я создал утилиту, чтобы узнать необходимо обновить индекс объекта, а затем вызвать метод update 

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"))

В вашем примере замените это ниже на EDIT_TODO case и используйте указанную выше updateObj утилиту 

case EDIT_TODO:
    console.log('edit todo called')
    console.log(payload.todo.id)
    return updateObj(state, payload.todo.id, payload.todo.todo);

Вот ссылка на созданный мной пример проекта. Хотя в нем нет реализации редукторов, но затем обновление объекта работает в соответствии с вашими требованиями с использованием метода immutability-helper s update.

Надеюсь, это поможет.

...