如何使用 Redux 和 React 更新我的 Todo

Question

我在基于 redux 的 todolist 中遇到问题，添加到 todo 和删除工作正常，但我无法更新 todo。 我正在使用免疫助手，它正在更新列表中的下一项，有时会返回 object 未定义！

这是我的 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)

这是编辑待办事项操作

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

Answer 1

immutability immutability-helper提供的update方法接受第二个参数 key 作为数组中需要更新的 object 的index 。

在您的情况下，它不起作用或更新下一个 object 因为对象的 id 是从1开始定义的。 理想情况下，在更新之前，您应该找到需要更新的 object 的索引，然后使用相同的索引来更新todo数组中的 object。

所以我创建了一个实用程序来查找需要更新的 object 的索引，然后调用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案例并使用上面的updateObj实用程序

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

这是我创建的示例项目的 链接。 虽然它没有减速器实现，但随后使用 immutability immutability-helper的update方法更新 object 根据您的要求工作。

希望这可以帮助。