在这个教程中，我们将创建一个基于React和Redux的待办事项列表应用。这个应用将允许用户添加、编辑、标记待办事项为已完成，并删除它们。以下是实现该应用的步骤和代码示例。
- 设置项目
首先，确保你已经安装了Node.js和npm。然后，你可以使用Create React App工具来初始化你的React项目：
npx create-react-app todo-app cd todo-app
接下来，安装Redux和React-Redux：
npm install redux react-redux redux-thunk
- 定义Redux结构和Actions
首先，我们需要定义Redux的state结构、actions以及reducers。
actions.js
export const ADD_TODO = 'ADD_TODO'; export const TOGGLE_TODO = 'TOGGLE_TODO'; export const DELETE_TODO = 'DELETE_TODO'; export const addTodo = (text) => ({ type: ADD_TODO, text, }); export const toggleTodo = (id) => ({ type: TOGGLE_TODO, id, }); export const deleteTodo = (id) => ({ type: DELETE_TODO, id, });
reducers.js
import { ADD_TODO, TOGGLE_TODO, DELETE_TODO } from './actions'; const initialState = [ // 初始待办事项列表 ]; const todoReducer = (state = initialState, action) => { switch (action.type) { case ADD_TODO: return [...state, { id: Date.now(), text: action.text, completed: false }]; case TOGGLE_TODO: return state.map((todo) => todo.id === action.id ? { ...todo, completed: !todo.completed } : todo ); case DELETE_TODO: return state.filter((todo) => todo.id !== action.id); default: return state; } }; export default todoReducer;
3. 设置Redux Store
store.js
import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import todoReducer from './reducers'; const store = createStore(todoReducer, applyMiddleware(thunk)); export default store;
- 创建待办事项列表组件
TodoList.js
import React from 'react'; import { connect } from 'react-redux'; import { addTodo, toggleTodo, deleteTodo } from './actions'; const TodoList = ({ todos, addTodo, toggleTodo, deleteTodo }) => { const handleAddTodo = (event) => { event.preventDefault(); const text = event.target.elements.newTodo.value; if (text) { addTodo(text); event.target.elements.newTodo.value = ''; } }; return ( <div> <form onSubmit={handleAddTodo}> <input type="text" name="newTodo" placeholder="添加待办事项" /> <button type="submit">添加</button> </form> <ul> {todos.map((todo) => ( <li key={todo.id}> <input type="checkbox" checked={todo.completed} onChange={() => toggleTodo(todo.id)} /> {todo.text} <button onClick={() => deleteTodo(todo.id)}>删除</button> </li> ))} </ul> </div> ); }; const mapStateToProps = (state) => ({ todos: state, }); const mapDispatchToProps = { addTodo, toggleTodo, deleteTodo, }; export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
- 整合Redux到应用中
在应用的入口文件（通常是src/index.js）中，使用Provider组件包裹整个应用，使其能够访问Redux store。
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import store from './store'; import TodoList from './TodoList'; ReactDOM.render( <Provider store={store}> <TodoList /> </Provider>, document.getElementById('root') );
- 美化界面（可选）
为了使待办事项列表更加吸引人，你可以添加一些CSS样式。这里只给出一个简单的示例，你可以根据自己的喜好进行扩展。
TodoList.css
.todo-list { list-style: none; padding: 0; } .todo-list li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .todo-list li input[type="checkbox"] { margin-right: 10px; } .todo-list li button { border: none; background-color: #e74c3c; color: white; padding: 5px 10px; border-radius: 4px; cursor: pointer; } form { margin-bottom: 20px; } form input[type="text"] { padding: 5px 10px; border-radius: 4px; border: 1px solid #ccc; } form button { border: none; background-color: #2ecc71; color: white; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
然后在TodoList.js中引入这个CSS文件：
import './TodoList.css'; // 在文件顶部引入CSS文件 // ... 其余代码保持不变 ...
- 运行应用
现在，你可以运行你的React应用并查看待办事项列表了。在命令行中，使用以下命令启动开发服务器：
npm start
然后，在浏览器中打开http://localhost:3000/，你应该能看到一个待办事项列表的界面，并可以添加、标记和删除待办事项。
- 额外功能（可选）
你还可以添加一些额外功能，比如待办事项的过滤（只显示已完成或未完成的）、持久化存储（使用localStorage或后端API保存待办事项）等。这些功能将进一步提高你的待办事项列表应用的实用性和用户体验。
通过以上的步骤和代码，你创建了一个基于React和Redux的待办事项列表应用。这个应用不仅展示了React组件的使用，还展示了Redux在状态管理方面的强大功能。希望这个教程对你有所帮助！
