TodoList

脚手架Github地址

1. 编写actions.js

2. 分析state

试着拆分成多个reducer

3. 了解store

  1. store.getState()
  2. store.dispatch(action)
  3. store.subscribe(listener)注册监听器
  4. 调用store.subscribe(listener)返回的函数来注销监听器

4. 了解redux数据流生命周期

  1. store.dispatch(action);
  2. store调用传入的reducer。
  3. 根reducer将多个子reducer输出的state合成一个单一的state树。
  4. store保存了根reducer返回的state树。

5. 分析容器组件和展示组件

在这里,我遇到了很多问题。展示组件就没有什么好说的了,主要是容器组件。

搞清楚,数据到底是如何流动的?

下面举例:

  1. React组件上有一个点击事件。
  2. 当点击之后,点击事件对应一个dispatch(actionCreator())。
  3. store会将actionCreator()返回的action以及当前的state传递给reducer。
  4. reducer收到action,然后根据action.type更新state,并且返回新的state。
  5. store保存新的state。
  6. 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作为一个展示组件。
  • mapStateToPropsmapDispatchToProps注入到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. 编写展示组件的代码

  1. class类
  2. 每个组件都要对propTypes进行验证
  3. 要export

7. 编写容器组件

  1. 定义mapStateToProps()将当前的state映射到组件的props, 读取state操作。
  2. 定义mapDispatcherToProps(), 分发action操作。
  • 传入dispatch方法。
  • 返回期望注入到展示组件的props中的回调方法。
  • 回调方法里,可以分发action。
  1. 使用connect()方法。

    export default const VisibleTodoList = connect(
    mapStateToProps,
    mapDispatcherToProps,
    )(TodoList);
    // TodoList为要被注入的展示组件

8. 传入store

使用React Redux里的Provider组件,将store注入到Provider组件,它可以让所有容器组件都可以访问到store。

9. 总结

当我遇到问题:

  1. 要沉着冷静。
  2. 要管理好时间。
  3. 别被bug或error搞的不高兴,要高兴,又有煅炼思维的机会了。
  4. 要思考这是为什么?
  5. 要搞清楚问题的本质。
  6. 要探究问题,探究数据的流动。

10. 参考

React中文文档
Github地址

react+redux+generation-modation脚手架搭建一个todolist的更多相关文章

  1. react+redux+generation-modation脚手架添加一个todolist

    当我遇到问题: 要沉着冷静. 要管理好时间. 别被bug或error搞的不高兴,要高兴,又有煅炼思维的机会了. 要思考这是为什么? 要搞清楚问题的本质. 要探究问题,探究数据的流动. TodoList ...

  2. react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)

    react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...

  3. 用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目

    一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...

  4. 如何用vue-cli3脚手架搭建一个基于ts的基础脚手架

    目录 准备工作 搭建项目 vue 中 ts 语法 项目代理及 webpack 性能优化 其他 忙里偷闲,整理了一下关于如何借助 vue-cli3 搭建 ts + 装饰器 的脚手架,并如何自定义 web ...

  5. 看完阮一峰的React教程后, 我写了一个TodoList

    看完阮一峰的React教程后,就自己做了这个TodoList,自己慢慢琢磨效率差了点但是作为入门小练习还是不错的. 以下是效果图:我的源码:todolistUI:bootstrap 4 一.组件化 我 ...

  6. 用脚手架搭建一个 vue 项目

    一.需要安装 node 环境 下载地址: https://nodejs.org/en/ 中文网: http://nodejs.cn/ 安装后为方便国内使用,可以把 npm 换成 taobao 的 cn ...

  7. ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

    工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...

  8. 利用VUE-CLI脚手架搭建VUE项目

    前言 在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习. 具体内容 搭建vue项目的准备工作 1.安装Nodejs.NPM以及VSCod ...

  9. 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇)

    背景 ​ 最近因为要做一个新的管理后台项目,新公司大部分是用vue写的,技术栈这块也是想切到react上面来,所以,这次从0到1重新搭建一个react项目架子,需要考虑的东西的很多,包括目录结构.代码 ...

随机推荐

  1. csu 1551(线段树+DP)

    1551: Longest Increasing Subsequence Again Time Limit: 2 Sec  Memory Limit: 256 MBSubmit: 267  Solve ...

  2. CSU 1424 Qz’s Maximum All One Square

    原题链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1424 逐渐找到做这种题的感觉了. 二分法.g[i][j]存储坐标(i, j)的值,s[i ...

  3. git rebase 过程中遇到冲突该怎么解决?

    在执行git rebase 过程中经常遇到问题,此时有点慌,一般如何解决呢? 1.先将本地的冲突手动解决 2.执行下面命令 git add . git rebase --contine  //继续re ...

  4. angular.js 验证码注册登录

    css部分 header{ height: 50px; line-height: 50px; display: flex; } .callback{ text-align: left; display ...

  5. SGU 204. Little Jumper

    204. Little Jumper time limit per test: 0.5 sec. memory limit per test: 65536 KB input: standard out ...

  6. vue引入自己写的js文件

    话不多说,直接上代码呀~ 先来个结构图: 中规中矩的vue-cli就写了一个自己的js文件 那么我想要引入到vue组件里. 1.首先写我的js文件 2.引入到vue组件!!!一定要用{}把方法名拿过来 ...

  7. BOM知识整理

    1.窗口位置: 1-1.window,screenLeft获取窗口距离屏幕左边的距离 1-2.window.screenTop获取窗口距离屏幕顶端的距离 1-3.window.screenX和wind ...

  8. 9 行 javascript 代码获取 QQ 群成员

    昨天看到一条微博:「22 行 JavaScript 代码实现 QQ 群成员提取器」. 本着好奇心点击进去,发现没有达到效果,一是 QQ 版本升级了,二是博客里面的代码也有些繁琐. 于是自己试着写了一个 ...

  9. vue-music 关于搜索历史本地存储

    搜索历史 搜索过的关键词 保存在本地存储 localstorage 中,同时多个组件共享搜索历史数据,将数据存到vuex 中,初始值从本地缓存中取得对应key 的值,没有数据默认为空数组 点击搜索关键 ...

  10. 【C++】指针的引用及面向对象

    指针的引用 #include <iostream> using namespace std; struct Teacher { ]; int age; }; int getTeacher( ...