以下是一个基于 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>
);