基于 React 和 Redux 开发一个任务管理应用，支持添加任务、编辑任务、完成任务和删除任务等功能

以下是一个基于 React 和 Redux 的任务管理应用的简单实现，支持添加任务、编辑任务、完成任务和删除任务等功能：

```javascript
import React, { useState } from 'react';
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

// Action types
const ADD_TASK = 'ADD_TASK';
const EDIT_TASK = 'EDIT_TASK';
const TOGGLE_TASK = 'TOGGLE_TASK';
const DELETE_TASK = 'DELETE_TASK';

// Action creators
let nextId = 0;

const addTask = (text) => ({
  type: ADD_TASK,
  id: nextId++,
  text,
});

const editTask = (id, text) => ({
  type: EDIT_TASK,
  id,
  text,
});

const toggleTask = (id) => ({
  type: TOGGLE_TASK,
  id,
});

const deleteTask = (id) => ({
  type: DELETE_TASK,
  id,
});

// Reducer
const initialState = [];

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TASK:
      return [...state, { id: action.id, text: action.text, completed: false }];
    case EDIT_TASK:
      return state.map((task) => (task.id === action.id ? { ...task, text: action.text } : task));
    case TOGGLE_TASK:
      return state.map((task) => (task.id === action.id ? { ...task, completed: !task.completed } : task));
    case DELETE_TASK:
      return state.filter((task) => task.id !== action.id);
    default:
      return state;
  }
};

// Components
const App = () => {
  const [text, setText] = useState('');
  const tasks = useSelector((state) => state);
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(addTask(text));
    setText('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
        <button type="submit">Add Task</button>
      </form>
      <ul>
        {tasks.map((task) => (
          <Task key={task.id} task={task} />
        ))}
      </ul>
    </div>
  );
};

const Task = ({ task }) => {
  const [editing, setEditing] = useState(false);
  const [text, setText] = useState(task.text);
  const dispatch = useDispatch();

  const handleEdit = (e) => {
    e.preventDefault();
    dispatch(editTask(task.id, text));
    setEditing(false);
  };

  const handleToggle = () => {
    dispatch(toggleTask(task.id));
  };

  const handleDelete = () => {
    dispatch(deleteTask(task.id));
  };

  return (
    <li>
      {editing ? (
        <form onSubmit={handleEdit}>
          <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
          <button type="submit">Save</button>
          <button onClick={() => setEditing(false)}>Cancel</button>
        </form>
      ) : (
        <div>
          <input type="checkbox" checked={task.completed} onChange={handleToggle} />
          <span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>{task.text}</span>
          <button onClick={() => setEditing(true)}>Edit</button>
          <button onClick={handleDelete}>Delete</button>
        </div>
      )}
    </li>
  );