react+redux+generation-modation脚手架搭建一个todolist
- TodoList
- 1. 编写actions.js
- 2. 分析state
- 3. 了解store
- 4. 了解redux数据流生命周期
- 5. 分析容器组件和展示组件
- 6. 编写展示组件的代码
- 7. 编写容器组件
- 8. 传入store
- 9. 总结
- 10. 参考
TodoList
1. 编写actions.js
2. 分析state
试着拆分成多个reducer
3. 了解store
store.getState()
store.dispatch(action)
store.subscribe(listener)注册监听器
调用store.subscribe(listener)返回的函数来注销监听器
4. 了解redux数据流生命周期
store.dispatch(action);
- store调用传入的reducer。
- 根reducer将多个子reducer输出的state合成一个单一的state树。
- store保存了根reducer返回的state树。
5. 分析容器组件和展示组件
在这里,我遇到了很多问题。展示组件就没有什么好说的了,主要是容器组件。
搞清楚,数据到底是如何流动的?
下面举例:
- React组件上有一个点击事件。
- 当点击之后,点击事件对应一个dispatch(actionCreator())。
- store会将actionCreator()返回的action以及当前的state传递给reducer。
- reducer收到action,然后根据action.type更新state,并且返回新的state。
- store保存新的state。
- state更新后,组件调用render()方法。
那么问题来了:
由于展示组件,没有数据,那么数据该是如何来的?
回答:数据是从存放在state里的,如何将state里的数据,传递给展示组件呢?使用connect()函数,它接受两个参数,两个参数分别是函数。
function mapStateToProps(state) {
return {
todos: selectTodos(state.main.todos, state.main.visibilityFilter),
visibilityFilter: state.main.visibilityFilter,
};
}
function mapDispatchToProps(dispatch) {
return {
onAddClick: text => dispatch(addTodo(text)),
onFilterChange: nextFilter => dispatch(setVisibilityFilter(nextFilter)),
};
}
class Main extends Component {
render() {
return (
<AddTodo
onAddClick={this.props.onAddClick}
/>
<VisibleTodoList />
<Footer
onFilterChange={this.props.onFilterChange}
visibilityFilter={this.props.visibilityFilter}
/>
);
}
}
Main.propTypes = {
onAddClick: PropTypes.func.isRequired,
onFilterChange: PropTypes.func.isRequired,
visibilityFilter: PropTypes.oneOf([
'SHOW_ALL',
'SHOW_ACTIVE',
'SHOW_COMPLETED',
]);
};
export default connect(mapStateToProps, mapDispatchToProps)(Main);
- 上面的demo,是将Main作为一个展示组件。
- 将
mapStateToProps
和mapDispatchToProps
注入到Main
里。 - 所以在
Main
组件里,就可以使用注入的方法和属性了。 - 值得注意的地方,在Main里使用的props都要进行检测,也就是下面的
Main.propTypes
。 - 除了将注入和组件写在一个js文件里,还可以将它们分开写。
- 就比如VisibleTodoList和TodoList分别写。然后将2个函数注入到TodoList里去。
- 对了,初始化的state是写在reducer里的,因为无论如何都会去调reducer。
在做的过程中,我还遇到了一个问题,它在几个地方三番五次的阻挠我。
// 代码里,我是这么获取state的数据的。
state.todos:
state.visibleFilter;
// 但是事实上,使用的脚手架里,它对app包了一层路由,它在最外层的reducer里的代码是这样的。
import main from 'containers/Main/reducer';
export default function createReducer(asyncReducers) {
return combineReducers(
main,
routing: routerReducer,
...asyncReducers,
);
}
// 所以我本身拿到的state是包含了main和routing这两个对象的。因此我要拿我组件里的state的数据,应该下面这样:
state.main.todos;
state.visibleFilter;
6. 编写展示组件的代码
- class类
- 每个组件都要对propTypes进行验证
- 要export
7. 编写容器组件
- 定义
mapStateToProps()
将当前的state映射到组件的props, 读取state操作。 - 定义
mapDispatcherToProps()
, 分发action操作。
- 传入dispatch方法。
- 返回期望注入到展示组件的props中的回调方法。
- 回调方法里,可以分发action。
使用connect()方法。
export default const VisibleTodoList = connect(
mapStateToProps,
mapDispatcherToProps,
)(TodoList);
// TodoList为要被注入的展示组件
8. 传入store
使用React Redux里的Provider组件,将store注入到Provider组件,它可以让所有容器组件都可以访问到store。
9. 总结
当我遇到问题:
- 要沉着冷静。
- 要管理好时间。
- 别被bug或error搞的不高兴,要高兴,又有煅炼思维的机会了。
- 要思考这是为什么?
- 要搞清楚问题的本质。
- 要探究问题,探究数据的流动。
10. 参考
react+redux+generation-modation脚手架搭建一个todolist的更多相关文章
- react+redux+generation-modation脚手架添加一个todolist
当我遇到问题: 要沉着冷静. 要管理好时间. 别被bug或error搞的不高兴,要高兴,又有煅炼思维的机会了. 要思考这是为什么? 要搞清楚问题的本质. 要探究问题,探究数据的流动. TodoList ...
- react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...
- 用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目
一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...
- 如何用vue-cli3脚手架搭建一个基于ts的基础脚手架
目录 准备工作 搭建项目 vue 中 ts 语法 项目代理及 webpack 性能优化 其他 忙里偷闲,整理了一下关于如何借助 vue-cli3 搭建 ts + 装饰器 的脚手架,并如何自定义 web ...
- 看完阮一峰的React教程后, 我写了一个TodoList
看完阮一峰的React教程后,就自己做了这个TodoList,自己慢慢琢磨效率差了点但是作为入门小练习还是不错的. 以下是效果图:我的源码:todolistUI:bootstrap 4 一.组件化 我 ...
- 用脚手架搭建一个 vue 项目
一.需要安装 node 环境 下载地址: https://nodejs.org/en/ 中文网: http://nodejs.cn/ 安装后为方便国内使用,可以把 npm 换成 taobao 的 cn ...
- ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例
工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...
- 利用VUE-CLI脚手架搭建VUE项目
前言 在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习. 具体内容 搭建vue项目的准备工作 1.安装Nodejs.NPM以及VSCod ...
- 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇)
背景 最近因为要做一个新的管理后台项目,新公司大部分是用vue写的,技术栈这块也是想切到react上面来,所以,这次从0到1重新搭建一个react项目架子,需要考虑的东西的很多,包括目录结构.代码 ...
随机推荐
- 正排索引(forward index)与倒排索引(inverted index) (转)
一.正排索引(前向索引) 正排索引也称为"前向索引".它是创建倒排索引的基础,具有以下字段. (1)LocalId字段(表中简称"Lid"):表示一个文档的局部 ...
- 修改系统时间为UTC时间
1 拷贝时区文件 cp /usr/share/zoneinfo/Etc/GMT /etc/localtime 2 修改/etc/profile 在最后添加 TZ="Etc/GMT" ...
- alias命令别名
笔者在看<鸟哥私房菜>时,突然看到这个命令,之前未接触过,故简单记录学习下,具体的大家可参见man手册.功能说明:设置指令的别名.语 法:alias[别名]=[指令名称]参 数 :若不加任 ...
- tomcat已启动,使用maven的deploy发布后,根据路径打开浏览器访问时报错HTTP Status 500 - Error instantiating servlet class
web项目中请求出现错误,如下: HTTP Status 500 - Error instantiating servlet class XXXX类 type Exception report mes ...
- 洛谷P2097 资料分发1 题解
题目传送门 这道题竟然是橙色的: 因为可以用并查集来做,当然您用dfs也可以,不过应该要加优化. 一开始就把读入的合并起来,最后逐个查找就好啦... #include<bits/stdc++.h ...
- Jmeter----连接mysql数据库及常见问题处理
jmeter要链接mysql数据库,首先得下载mysql jdbc驱动包,(注:驱动包的版本一定要与你数据库的版本匹配,驱动版本低于mysql版本有可能会导致连接失败报错) 本人的数据为5.7.18, ...
- 2019.2.25 模拟赛T1【集训队作业2018】小Z的礼物
T1: [集训队作业2018]小Z的礼物 我们发现我们要求的是覆盖所有集合里的元素的期望时间. 设\(t_{i,j}\)表示第一次覆盖第i行第j列的格子的时间,我们要求的是\(max\{ALL\}\) ...
- Codeforces Round #292 (Div. 1) C - Drazil and Park
C - Drazil and Park 每个点有两个值Li 和 Bi,求Li + Rj (i < j) 的最大值,这个可以用线段树巧妙的维护.. #include<bits/stdc++. ...
- 七牛刷新接口PHP实现
<?php require_once '../autoload.php'; use Qiniu\Auth; use Qiniu\Http\Client; $accessKey = 'access ...
- CTF西湖论剑
一,西湖论剑 itoa()函数有3个参数:第一个参数是要转换的数字,第二个参数是要写入转换结果的目标字符串,第三个参数是转移数字时所用 的基数.在上例中,转换基数为10.10:十进制:2:二进制... ...