构建一个基于React和Redux的Todo应用

简介: 构建一个基于React和Redux的Todo应用

在这个教程中,我们将一起构建一个基于React和Redux的Todo应用。这个应用将允许用户添加、编辑、标记和删除待办事项。我们将逐步构建应用的各个部分,包括组件、Redux状态管理、以及React和Redux之间的集成。


  1. 设置项目

首先,我们需要创建一个新的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


  1. 创建Redux Store和Actions

src目录下创建一个redux文件夹,并在其中创建actions.jsstore.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,
});


  1. 创建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);


  1. 创建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);


  1. 集成TodoList和TodoForm到App组件

src目录下找到App.js文件,并将TodoListTodoForm组件集成到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;


  1. 添加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')
);


  1. 运行应用

现在,你可以运行你的Todo应用了!在命令行中运行以下命令:

npm start

应用将在浏览器中启动,并显示一个待办事项列表和一个输入框,允许你添加新的待办事项。你可以点击复选框来标记待办事项为已完成,并可以点击“Delete”按钮来删除待办事项。

以上就是一个简单的基于React和Redux的Todo应用的构建过程。你可以根据需要进一步扩展和优化这个应用,例如添加待办事项的过滤、排序等功能。

目录
相关文章
|
7天前
|
存储 前端开发 JavaScript
深入浅出React框架:构建高效组件化网页的实战指南
【7月更文挑战第9天】在当今快速发展的前端技术领域,React凭借其强大的组件化思想、高效的虚拟DOM以及丰富的生态系统,成为了构建动态用户界面的首选框架之一。本文将带你深入浅出地探索React的核心概念,并通过实战示例,展示如何利用React构建高效、可维护的组件化网页。
|
1月前
|
前端开发 JavaScript Linux
分离前后端react和django3构建的应用
【6月更文挑战第4天】在本文中,我们介绍了如何设置React前端并连接到Django后端。并讨论了前后端分离的好处,并计划扩展API以支持更多HTTP操作和用户身份验证功能。
60 5
分离前后端react和django3构建的应用
|
10天前
|
Web App开发 JavaScript 前端开发
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
41 0
|
2月前
|
前端开发 JavaScript API
使用React和GraphQL构建一个简单的博客应用
使用React和GraphQL构建一个简单的博客应用
31 1
|
1月前
|
Python API 前端开发
使用react和django3构建应用
【6月更文挑战第3天】首先,创建Django项目和todos应用,安装必要依赖,配置settings.py并建立数据库模型。通过makemigrations和migrate更新数据库。接着,设置REST_FRAMEWORK的权限为AllowAny,构建API的urls, views, serializers。在todos应用中定义ListTodo和DetailTodo视图,以及TodoSerializer。对于跨域资源共享(CORS),通过django-cors-headers中间件配置白名单。
28 0
|
2月前
|
存储 JavaScript 前端开发
基于React和Redux的待办事项列表应用
基于React和Redux的待办事项列表应用
38 0
|
11月前
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
50 0
|
11月前
|
前端开发
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之8
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之7
35 0
|
2月前
|
前端开发 JavaScript
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
43 1
|
8月前
|
前端开发
前端笔记:React的form表单全部置空或者某个操作框置空的做法
在React框架前端开发中,经常会有弹出框的开发,涉及到弹出框,难免就会有表单。一般在关闭弹出框或者对表单联动时,往往都需要考虑对表单进行置空操作了。
66 0