【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 .本文不是官方文档的翻译. ...
随机推荐
- ajax 的 promise
$.when().done().fail() $.when($.ajax("test1.html"),$.ajax("test2.html")).done(fu ...
- springboot中加入druid对sql进行监控
springboot作为现在十分流行的框架,简化Spring应用的初始搭建以及开发过程,现在我们就使用springboot来进行简单的web项目搭建并对项目sql进行监控. 项目的搭建就省略了,spr ...
- 关于springboot配置文件的另类读取方法
一.背景故事 前阵子我接手了公司另外一个同事手里的项目,项目是用的springboot 写的,但是比较坑的就是这个项目写的有点不伦不类.虽然是用的springboot,但由于他是拿了一堆代码拼凑起 ...
- 两台centos之间使用scp命令传输文件
1.将本地文件copy到远程 (1)复制文件 scp local_file remote_username@remote_ip:remote_folder 例如:将/usr/local/aa.png文 ...
- Flask初学者:配置文件
如果设置项比较少的话可以使用“app.config['param_name']=value”的形式直接使用,如果需要设置的参数比较多的话,可以单独新建一个配置文件用来存放配置信息,配置文件中的参数需大 ...
- [Hdu3652]B-number(数位DP)
Description 题目大意:求小于n是13的倍数且含有'13'的数的个数. (1 <= n <= 1000000000) Solution 数位DP,题目需要包含13,且被13整除, ...
- 51NOD 1292 1277(KMP算法,字符串中的有限状态自动机)
在前两天的CCPC网络赛中...被一发KMP题卡了住了...遂决定,哪里跌倒就在哪里爬起来...把个KMP恶补一发,连带着把AC自动机什么的也整上. 首先,介绍设定:KMP算法计划解决的基本问题是,两 ...
- iview框架 两侧弹框 出现第二层弹框 一闪而过的问题
分析原因:寡人怀疑可能是,两层弹出框 采用的是一个开关值,发生了覆盖 解决方式 是在第二层弹框外套层计时器 源代码如下: 修改后为:
- 设计模式之第16章-代理模式(Java实现)
设计模式之第16章-代理模式(Java实现) “现在朋友圈真是太让人蛋疼了啊.”“怎么说?”“一堆代理,各种卖东西的,看着好烦人.”“哎,删了呗.”“都是朋友,哪里好意思删啊.”“这倒也是...哎,迫 ...
- 【Palindrome Number】cpp
题目: Determine whether an integer is a palindrome. Do this without extra space. click to show spoiler ...