Redux Toolkit中使用dispatch传递多参数实现Todo编辑

你需要在dispatch编辑动作时同时传递待修改Todo的key和新文本，通过传递对象作为payload实现，再在slice的reducer里根据key定位Todo并更新文本。

1. 修改dispatch时的参数 #

在App组件的handleOnSavePress函数中，将原有的单一参数改为包含key和newText的对象，同时增加空值判断和模态框状态重置：

const handleOnSavePress = () => { 
  // 避免提交空文本
  if (newText.trim().length === 0) return;
  // 传递key和新文本组成的对象
  dispatch(editTodo({ 
    key: currentItem.key, 
    newText: newText 
  }));
  setShowModal(false); // 保存后关闭模态框
  setNewText(""); // 清空输入框内容
}

2. 完善slice中的editTodo reducer #

在todoSlice的reducers里，通过payload中的key找到对应Todo，更新其text属性：

editTodo:(state, action) => {
  // 解构payload中的参数
  const { key, newText } = action.payload;
  // 找到目标Todo
  const targetTodo = state.todos.find(todo => todo.key === key);
  // 找到则更新文本
  if (targetTodo) {
    targetTodo.text = newText;
  }
}

额外优化：编辑前初始化输入框内容 #

打开编辑模态框时，将newText初始化为当前Todo的文本，提升用户体验：

const handleOnEditPress = (item) => {
  setModalText(item.text);
  setNewText(item.text); // 初始化输入框为原文本
  setShowModal(true);
  setCurrentItem(item);
}

内容的提问来源于stack exchange，提问作者Tom