在Redux中实现编辑功能：能否不使用本地state完成？

完全可以通过将编辑相关状态迁移到Redux Store的方式实现纯Redux管理的条目编辑功能，不需要任何本地state。具体修改步骤如下：

步骤1：新增Redux Action定义 #

在你的TodoActions.js中新增编辑状态相关的action：

// 新增action类型常量
export const SET_EDITING_TODO = 'SET_EDITING_TODO'
export const CLEAR_EDITING_TODO = 'CLEAR_EDITING_TODO'

// 新增action creator
// 触发编辑：传入要编辑的todo条目
export const setEditingTodo = (todo) => ({
  type: SET_EDITING_TODO,
  payload: todo
})
// 关闭编辑态
export const clearEditingTodo = () => ({
  type: CLEAR_EDITING_TODO
})

步骤2：修改Todo Reducer逻辑 #

在对应的todo reducer中新增editingTodo状态字段，处理新增的action：

// 初始状态新增editingTodo字段，null代表当前无正在编辑的条目
const initialState = {
  todos: [],
  editingTodo: null
}

export default function todoReducer(state = initialState, action) {
  switch(action.type) {
    // 其他原有case逻辑保留
    case SET_EDITING_TODO:
      return {
        ...state,
        editingTodo: action.payload
      }
    case CLEAR_EDITING_TODO:
      return {
        ...state,
        editingTodo: null
      }
    // 原有editTodo的case，提交后自动清空编辑态
    case EDIT_TODO:
      return {
        ...state,
        todos: state.todos.map(todo => 
          todo.id === action.payload.id ? action.payload : todo
        ),
        editingTodo: null
      }
    default:
      return state
  }
}

步骤3：重构TodoList组件 #

删除所有本地state，从Redux中读取编辑状态、绑定编辑相关的dispatch方法：

import { connect } from "react-redux";
import { editTodo, setEditingTodo, clearEditingTodo } from "../actions/TodoActions"
import { Field, Form, Formik } from "formik";

const TodoList = ({ todos, editTodo, setEditingTodo, editingTodo, clearEditingTodo }) => {
    return (
        <div>
            {/* editingTodo非空时显示编辑表单 */}
            {editingTodo && (
                <div>
                    <h3>Todo edit: </h3>
                    <Formik
                        initialValues={{
                            id: editingTodo.id,
                            name: editingTodo.name,
                            date: editingTodo.date,
                            done: editingTodo.done
                        }}
                        onSubmit={(values) => editTodo(values)}
                        enableReinitialize={true}>
                        <Form>
                            <Field name="name" />
                            <Field name="date" />
                            <button type="submit">
                                Zatwierdz
                            </button>
                            <button type="button" onClick={clearEditingTodo}>取消</button>
                        </Form>
                    </Formik>
                </div>
            )}
            {todos.map(todo => (
                <div key={todo.id}>
                    {todo.name} 
                    <button onClick={() => setEditingTodo(todo)}>Edit</button>
                </div>
            ))}
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        todos: state.todos,
        editingTodo: state.editingTodo
    };
}
const mapDispatchToProps = {
    editTodo,
    setEditingTodo,
    clearEditingTodo
}

export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

补充说明 #

修改后所有编辑相关的状态都由Redux统一管理，你可以直接通过Redux DevTools追踪编辑状态的变化，也可以在其他组件中直接读取当前正在编辑的条目信息。

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