在这个教程中，我们将一起构建一个基于React和Redux的Todo应用。这个应用将允许用户添加、编辑、标记和删除待办事项。我们将逐步构建应用的各个部分，包括组件、Redux状态管理、以及React和Redux之间的集成。
- 设置项目
首先，我们需要创建一个新的React项目。如果你还没有安装create-react-app，请先运行以下命令安装它：
npm install -g create-react-app
然后，使用create-react-app创建一个新的React项目：
create-react-app todo-app cd todo-app
接下来，安装Redux和React-Redux：
npm install redux react-redux
- 创建Redux Store和Actions
在src目录下创建一个redux文件夹，并在其中创建actions.js和store.js文件。
actions.js
export const ADD_TODO = 'ADD_TODO'; export const TOGGLE_TODO = 'TOGGLE_TODO'; export const DELETE_TODO = 'DELETE_TODO'; export function addTodo(text) { return { type: ADD_TODO, text }; } export function toggleTodo(id) { return { type: TOGGLE_TODO, id }; } export function deleteTodo(id) { return { type: DELETE_TODO, id }; }
store.js
import { createStore } from 'redux'; import rootReducer from './reducers'; const store = createStore(rootReducer); export default store;
我们还需要创建一个reducers文件夹，并在其中创建一个todos.js文件。
todos.js
import { ADD_TODO, TOGGLE_TODO, DELETE_TODO } from '../actions'; const initialState = []; export default function todosReducer(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; } }
别忘了在reducers文件夹中创建一个index.js文件来组合所有的reducer。
index.js
import { combineReducers } from 'redux'; import todosReducer from './todos'; export default combineReducers({ todos: todosReducer, });
- 创建Todo组件
在src/components目录下创建一个TodoList.js文件，用于显示待办事项列表。
TodoList.js
import React from 'react'; import { connect } from 'react-redux'; import { toggleTodo, deleteTodo } from '../redux/actions'; function TodoList({ todos, toggleTodo, deleteTodo }) { return ( <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)}>Delete</button> </li> ))} </ul> ); } const mapStateToProps = state => ({ todos: state.todos, }); const mapDispatchToProps = { toggleTodo, deleteTodo, }; export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
- 创建TodoForm组件
接下来，我们创建一个TodoForm.js文件来允许用户添加新的待办事项。
TodoForm.js
import React, { useState } from 'react'; import { connect } from 'react-redux'; import { addTodo } from '../redux/actions'; function TodoForm({ addTodo }) { const [text, setText] = useState(''); const handleSubmit = e => { e.preventDefault(); if (text) { addTodo(text); setText(''); } }; return ( <form onSubmit={handleSubmit}> <input type="text" placeholder="Add a todo" value={text} onChange={e => setText(e.target.value)} /> <button type="submit">Add Todo</button> </form> ); } export default connect(null, { addTodo })(TodoForm);
- 集成TodoList和TodoForm到App组件
在src目录下找到App.js文件，并将TodoList和TodoForm组件集成到App组件中。
App.js
import React from 'react'; import TodoList from './components/TodoList'; import TodoForm from './components/TodoForm'; import './App.css'; function App() { return ( <div className="App"> <h1>Todo List</h1> <TodoForm /> <TodoList /> </div> ); } export default App;
- 添加Redux Provider到根组件
最后，我们需要将Redux store添加到应用的根组件中，以便所有的子组件都能访问到Redux state和actions。在src/index.js文件中进行以下修改：
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { Provider } from 'react-redux'; import store from './redux/store'; ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') );
- 运行应用
现在，你可以运行你的Todo应用了！在命令行中运行以下命令：
npm start
应用将在浏览器中启动，并显示一个待办事项列表和一个输入框，允许你添加新的待办事项。你可以点击复选框来标记待办事项为已完成，并可以点击“Delete”按钮来删除待办事项。
以上就是一个简单的基于React和Redux的Todo应用的构建过程。你可以根据需要进一步扩展和优化这个应用，例如添加待办事项的过滤、排序等功能。
