React学习(2)——action,reducer
action creator
是一个函数,格式如下:
var actionCreator = function() {
// 构建一个 action 并返回它
return {
type: 'AN_ACTION'
}
}
action
是一个拥有 type 属性的对象,用来描述发生了什么,然后按 type 决定如何处理 action。
举一个例子,获取数据是一个 action,一个点击是一个 action,一个 input 变化也是一个 action 等等。
下面是一些 action 的示例:
{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
reducer
为了把 action 和 state 串起来,开发一些函数,这就是 reducer。
Reducer 函数只是一个纯函数,它接收应用程序的当前状态以及发生的 action,然后返回修改后的新状态(或者有人称之为归并后的状态)。
reducer 只是一个接收 state 和 action,并返回新的 state 的函数。
对于大的应用来说,不大可能仅仅只写一个这样的函数,所以我们编写很多小函数来分别管理 state 的一部分:
这里有个常见模式:在 reducer 里用 switch 来响应对应的 action 。用 switch 的时候, **永远** 不要忘记放个 “default” 来返回 “state”,
参考:https://github.com/react-guide/redux-tutorial-cn
React学习(2)——action,reducer的更多相关文章
- React学习资料
以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...
- react学习一篇就够了
webstrom自动格式化代码 命令 js框架 MVC 安装 npm install create-react-app -g 生成项目(项目名npm发包包命名规范 /^[a-z0-9_-]$/) cr ...
- AntDesign(React)学习-1 创建环境
目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
- React学习系列
React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- react 学习与使用记录
相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...
- Struts2框架学习(二) Action
Struts2框架学习(二) Action Struts2框架中的Action类是一个单独的javabean对象.不像Struts1中还要去继承HttpServlet,耦合度减小了. 1,流程 拦截器 ...
随机推荐
- 用strace排查故障的5种简单方法(每日一译)
原文链接:5 simple ways to troubleshoot using Strace 我很意外大部分人都不知道如何使用strace.strace一直是我的首选debug工具,因为它非常的有效 ...
- POJ 1258 Agri-Net|| POJ 2485 Highways MST
POJ 1258 Agri-Net http://poj.org/problem?id=1258 水题. 题目就是让你求MST,连矩阵都给你了. prim版 #include<cstdio> ...
- cocos2d-html5 javascript 通过C++绑定,调用java方法
1.java中的写法 /* * XConnectPlugin.java * * Created on: 2014年4月30日 * Author: lswdonald9@gmail.com */ pac ...
- 【翻译自mos文章】Clusterware间歇性的hang,命令报CRS-184而且Network Socket Files in /tmp/.oracle or /var/tmp/.oracle被删
来源于: Clusterware Intermittently Hangs And Commands Fail With CRS-184 as Network Socker Files in /tmp ...
- itunes app 下载链接的几种表现形式
第一种:itunes://itunes.apple.com/cn/app/id794862904 ,这是最普通的一种. 直接在浏览器中输入.就能够打开电脑上安装的itunes,并跳转到相应的app下载 ...
- 正确使用pthread_create,防止内存泄漏
近日,听说pthread_create会造成内存泄漏,觉得不可思议,因此对posix(nptl)的线程创建和销毁进行了分析. 分析结果:如果使用不当,确实会造成内存泄漏. 产生根源:pthread ...
- 关于DP与背包
听说过动态规划(DP)的同学应该都知道有背包问题的存在. 首先我们来了解一下动态规划 基本思想: 动态规划算法通常用于求解具有某种最优性质的问题.在这类问题中, 可能会有很多可行解.没一个解都对应于一 ...
- 【45.65%】【codeforces 560B】Gerald is into Art
time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...
- session了解及超时处理
Session了解 Session是什么 引言 在web开发中,session是个非常重要的概念.在许多动态网站的开发者看来,session就是一个变量,而且其表现像个黑洞,他只需要将东西在合 ...
- [CSS] Re-order the appearance of grid items using the order property
As with flex items, we can set an order value on grid items. Let’s see how this affects the DOM and ...