【14】redux 之 redux-actions
redux-actions有两大法宝createAction和handleActions.
createAction
原来创建action:
const startAction = () => ({ type: START });
使用redux-actions创建action:
import { createAction } from 'redux-actions';
const startAction = createAction(START);
handleActions
原来reducer操作state写法要使用switch或if else来匹配:
function timer(state = defaultState, action) {
switch (action.type) {
case START:
return { ...state, runStatus: true };
case STOP:
return { ...state, runStatus: false };
case RESET:
return { ...state, seconds: 0 };
case RUN_TIMER:
return { ...state, seconds: state.seconds + 1 };
default:
return state;
}
}
使用redux-actions``reducer操作state:
const timer = handleActions({
START: (state, action) => ({ ...state, runStatus: true }),
STOP: (state, action) => ({ ...state, runStatus: false }),
RESET: (state, action) => ({ ...state, seconds: 0 }),
RUN_TIMER: (state, action) => ({ ...state, seconds: state.seconds + 1 }),
}, defaultState);
http://blog.csdn.net/sinat_17775997/article/details/70176723
【14】redux 之 redux-actions的更多相关文章
- [React Testing] The Redux Store - Multiple Actions
When using Redux, we can test that our application state changes are working by testing that dispatc ...
- 14. react 基础 redux 的编写 TodoList 功能
1. 安装 redux 监听工具 ( 需要翻墙 ) 打开 谷歌商店 搜索 redux devtool 安装第一个即可 2. 安装 redux yarn add redux 3. 创建 一个 store ...
- 25.redux回顾,redux中的action函数异步
回顾:Redux: 类似于 Vuex 概念:store/reducer/action action:动作 {type,.....} 一定要有type 其他属性不做限制 reducer:通过计算产生st ...
- 记一次修改框架源码的经历,修改redux使得redux 可以一次处理多个action,并且只发出一次订阅消息
redux是一个数据状态管理的js框架,redux把行为抽象成一个对象,把状态抽象成一个很大的数据结构,每次用户或者其他什么方式需要改变页面都可以理解成对数据状态的改变,根据出发这次改变的不同从而有各 ...
- React-安装和配置redux调试工具Redux DevTools
chrome扩展程序里搜索Redux DevTools进行安装 新建store的时候,进行如下配置. import { createStore, applyMiddleware ,compose} f ...
- Redux 和 Redux thunk 理解
1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...
- [Redux] Understand Redux Higher Order Reducers
Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a ...
- 手把手教你撸一套Redux(Redux源码解读)
Redux 版本:3.7.2 Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 说白了Redux就是一个数据存储工具,所以数据基础模型有get方法,set方法以及数据改变后通知 ...
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- Redux 核心概念
http://gaearon.github.io/redux/index.html ,文档在 http://rackt.github.io/redux/index.html .本文不是官方文档的翻译. ...
随机推荐
- centos7中使用LVM管理磁盘和挂载磁盘
centos7使用LVM管理一块新的磁盘 注意!文中凡是带#的都是命令标志. 一些重要概念: LV(Logical Volume)- 逻辑卷, VG(Volumne Group)- 卷组, PV(Ph ...
- Centos7多内核情况下修改默认启动内核方法
1.1 进入grub.cfg配置文件存放目录/boot/grub2/并备份grub.cfg配置文件 [root@linux-node1 ~]# cd /boot/grub2/ [root@linux ...
- day 44 前端HTML
前端HTML HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk ...
- oracle 事务 锁机制
原文地址:http://www.cnblogs.com/quanweiru/archive/2013/05/24/3097367.html 本课内容属于Oracle高级课程范畴,内容略微偏向理论性,但 ...
- Susan Sontag【苏珊·桑塔格】
Sunsan Sontag Sunsan Sontag was one of the most noticeable figures in the world of literature. 苏珊·桑塔 ...
- shell脚本中的交互式输入自动化
shell中有时我们需要交互,但是呢我们又不想每次从stdin输入,想让其自动化,这时我们就要使shell交互输入自动化了. 1 利用重定向 重定向的方法应该是最简单的 例: 以下的te ...
- Fiddler用AutoResponder实现app升级异步更新
先说一下我自己理解的异步更新:用app异步升级举例,app是否升级的检查是在启动app时访问服务器的,把app本地的最新版本号与服务器端的最新版本号做对比,假如不一致,则提示升级.但本次已经打开使用a ...
- TCP/IP网络编程之地址族与数据序列
分配IP地址和端口号 IP是Internet Protocol(网络协议)的简写,是为收发网络数据而分配给计算机的值.端口号并非赋予计算机的值,而是为区分程序中创建的套接字而分配给套接字的序号 网络地 ...
- 03017_ajax
1.Ajax概述 (1)什么是同步,什么是异步? ①同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态: ②异步现象:客户端发送请求到服务器端,无论服务器是否返回响应, ...
- 【Container With Most Water】cpp
题目: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, a ...