基于react-redux开发一个待办事项的demo–todoList的笔记

最新推荐文章于 2024-03-28 05:54:12 发布
最新推荐文章于 2024-03-28 05:54:12 发布
阅读量1.4k 收藏
点赞数
分类专栏： 学习笔记 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jizai94/article/details/78922955
版权
这篇笔记详细记录了如何使用react-redux开发一个待办事项应用todoList。首先介绍了项目目录结构，包括index.html、entry.js、actions、components、containers和reducers。接着讲述了在index.html设置基本结构，entry.js的编写，以及分析action的触发情况。然后，讨论了reducer的编写，包括addTodo、toggleTodo和setVisibility的处理。在App.js中，展示了页面的三层组件结构（AddTodo、VisibleTodoList、Footer），并利用react-redux的connect API连接数据。最后提到了开发过程中遇到的问题，如jsx的import、module的export、ref属性、扩展运算符和Array方法的区别等。
摘要由CSDN通过智能技术生成

基于react-redux开发一个待办事项的demo–todoList的笔记

目录结构

目录结构

开发时的步骤

  1. 创建目录结构，包括index.html, entry.js(入口文件), actions(例子中使用到的action), component(UI组件，负责UI呈现), containers(container组件，负责逻辑处理以及数据交互), reducers(dispatch action 到 store 时触发的处理函数)

  2. 在index.html中添加基本的结构

  3. 编写入口文件entry.js

  4. 先分析例子中将会发生或者出发的事情,也就是发出的action,根据分析本例子中将会发生三件事情:

    (1)点击 Add todo 按钮添加待办事项（查看actions/addTodo.js）

    (2)点击 todoList 中的待办事项，切换待办事项的状态为完成还是待完成（查看actions/toggleTodo.js）

    (3)设置过滤器，从而在事项列表中呈现对应的事项（查看actions/setVisibility.js）

  5. 编写reducer函数，包括addTodo以及ToggleTodo发生时的处理(reducers/todo.js) 以及 setVisibility发生时的处理 (reducers/visibilityFilter.js) , 最后通过redux提供的合并reducer的api

最低0.47元/天 解锁文章
jizai94
关注
专栏目录
React基础教程：TodoList案例
WwLK123的博客
06-12 939
react的状态state学习的经典案例：todolist
Redux入门案例todo
水痕
03-08 1232
redux入门案例写在一个页面中实现，增加数据与删除数据(官方版的简写)[忽视项目中的命名]'use strict'; import React,{Component} from 'react'; import {createStore} from "redux";function add(text) { return{ type:"ADD", value:t
一个待办事项微信小程序
08-10
一个“待办事项”微信小程序
redux实现todolist
weixin_45451197的博客
03-29 373
首页看下目录结构
React----简易待办事项
fengGer的博客
04-02 513
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
React+Redux从零开始实现TodoList
KatherineLYP的博客
08-09 468
最终效果： React版的TodoList的实现： 首先搭建一个基本的react应用。 import React, { Component } from 'react'; import addItem from "../actions/action"; class App extends Component { constructor(props) { super(p...
React学习系列八小示例待办事项及源码
每天进步一点点儿
12-08 657
看着效果图先自己实现的效果，后续看完教程后加了下缓存 先展示下效果图   使用两个数组分别表示正在进行的事项和已经完成的事项 import React,{Component} from 'react' import storage from '../util/storage' class ToDoList extends Component { constructor(props...
react Redux 用Redux中央仓库实现一个todolist，字节前端面试必问
最新发布
m0_60607895的博客
03-28 669
资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-HYINMP5S-1711576441354)][外链图片转存中…(img-RmUW6IUJ-1711576441355)]
React学习(一)——初步了解，完成ToDoList功能demo
ggsddu！
12-21 749
React学习笔记(一) 自用 文章目录React学习笔记(一)1. React简介2. 前端三大主流框架React vs VueReact的优势3. React基础知识JSX语法为什么使用 JSX？React 组件虚拟DOMDiff算法基础语法React.ComponentReactDOM.render4. 完成一个简单的demo——TodoList前期：完善功能中期：组件拆分后期代码优化，调...
react+react-redux+redux实现的todolist案例
02-09
react+react-redux+redux实现的todolist案例,适合初学者学习，又想通过redux进军react－redux可以尝试
react论坛提问回复功能基本实现例子（react+redux）
02-05
例子查看及说明：http://blog.csdn.net/dknightl/article/details/79168962。 一。用npm install 可以下载安装package.json中的模块。运行时如果一直在map to regist,可以尝试换镜像。 二。npm run server 可以开户站点。
react用Redux中央仓库实现一个todolist
12-13
本文实例为大家分享了react用Redux中央仓库实现一个todolist的具体代码，供大家参考，具体内容如下 Redux简单介绍 Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用（SPA）开发日趋复杂，JavaScript需要管理比任何时候都要多的state（状态），Redux就是降低管理难度的。（Redux支持React，Angular、jQuery甚至纯JavaScript） Redux Dev Tools插件 Redux调试工具 谷歌商店下载 redux三个坑： store仓库必须是唯一的，多个store是坚决不允许，只能
React + Redux实现计算案例
04-18
React + Redux 实现计算案例，包含了整个项目的所有代码
待办事项前端
02-17
该项目是通过。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 而是将所有配置文件和传递依赖项（webpack，Babel，ESLint等）直接复制到您的项目中，以便您完全
【尚硅谷React】——React全家桶笔记
m0_67393342的博客
07-29 4023
用于构建用户界面的JavaScript库（只关注页面），将数据渲染为HTML视图；由Facebook开发且开源。中文官网英文官网原生JS操作DOM繁琐且效率低，因为用DOM-API操作UI；JS直接操作DOM会使浏览器进行大量的重绘重排；原生JS没有组件化编码方案，代码复用率低react开发者工具Chrome插件ReactDeveloperTool（注意安装来源为facebook的）方法一在package.json中追加如下配置"proxy""http5000"优点方法二第一步。...
React 待办事项列表案例
小葵坤_易安的博客
04-08 1265
例：在文本框中输入内容回车后，内容出现在未完成中；点击未完成中的选择框，其内容出现在已完成中，反之亦然；点击删除按钮会删除 新建一个todoList .js文件： import React from 'react'; import '../assets/css/todoList.css' class todoList extends React.Component { construct...
青否云 - 小程序待办事项 wxapp开源系统
几何裂变
12-11 1010
青否云最新开源系统：小程序待办事项 wxapp-demo 青否云 小程序 demo 下载地址：https://github.com/qingful/wxapp-demo 官网 http://cloud.qingful.com 演示 https://qingful.github.io/jquery-demo/index.html 账号：13253522080 密
使用react-redux实现todolist的增删改
TwoHooooo的博客
02-24 378
1.创建一个react项目 (1).npm i create-react-app -g (2).create-react-app xxx(项目名称) (3).cd xxx (4.).npm start 启动项目后会浏览器会自动打开页面 出现react的标志即为打开成功 2.安装react-redux 运行npm i redux react-redux --save-dev 3.建立store用于数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值