一、项目的构建 1、本项目我使用前端脚手架yeoman构建参考 2、创建一个todo项目 yo react-webpack 1. 3、安装别的依赖包 npm install redux --save npm install react-redux --save npm install redux-thunk --save 1. 2. 3. 4、把刚刚构建的项目运行 npm run serve 1. 5、在浏览器上访问 localhost:8...
import React from 'react';import { connect } from 'react-redux';import { toggleTodo, deleteTodo } from '../redux/actions';function TodoList({ todos, toggleTodo, deleteTodo }) {return ({todos.map(todo => ( toggleTodo(todo.id)}/>{todo.text} deleteTodo(todo.id)}>Delete))});}const...
而一个TodoItem里面的数据是无法单独在这个这个组件里连接 Redux 获取的(你咋知道你要的 todo 是哪个 todo). 所以正确做法应该是在父组件(也就是TodoApp) 里面获取数据, 通过 props 传给TodoItem, 包括对 redux 里面action操作也是如此 代码如下: // components/TodoItem.tsximportReact,{useState}from"react";i...
最近学习redux,打算用redux写了一个todo。记录下来,供以后开发时参考,相信对其他人也有用。 代码 代码请见我的github 组织架构如下图:
本教程适用于知道react和redux是什么东西的超级初学者使用。 首先请确保你已经安装了最新的node.js 以及 npm。 接下来我们就可以开始啦! 首先创建我们的项目目录。 mkdir todos 然后建立我们的jason文件 npm init -y package.jason中定义了我们项目所需要的各种模块,以及项目的配置信息。当我们从git或者其他地方拿到我...
参考:https://facebook.github.io/react/docs/thinking-in-react.html 使用Redux 和 React 在上面的构建出了最小数据模型之后要开始设计Redux的actions和reducer 接上面的第三步之后,设置actions 设计reducer
然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初时间比较短,没时间去结合redux了,所以也算交差了,后面看公司写的react+redux实现的,简直一脸懵逼,完全不懂啊,公司主要用angular和jQuery!所以这个任务完成后,就没管过react+redux了,最近再去看,看到redux时,完全懵逼...
项目地址:todo App。纯react是在normal分支,结合redux的是在redux分支。react(15.6.1)和redux(3.7.2)都是当前(2017.8.4)的最新版本。所有的数据是存储在localstorage下的,点击查看demo。因为我的ui是移动端的,pc端没有做处理,只能在移动端或是chrome下按CTRL+SHIFT+M进行查看。
todolist for react redux 学习总结 前言 最近一直在学习react技术栈,相关的理论和概念基本都了解了,之前也用reactjs写了几个demo,切身体会到了函数式编程和组件化开发的强大之处,但因各种主客观原因,事后没有对相关知识点进行梳理和总结,而且工作中也没用到,导致现在复习的时候生疏了,还需要花大部分时间重新理清...
import React from 'react' import PropTypes from 'prop-types' const Todo = ({ onClick, completed, text }) => ( {text} ) Todo.propTypes = { onClick: PropTypes.func.isRequired, completed: PropTypes.bool.isRequired, text: PropTypes.string.isRequired } export default Todocomponents/Todo...