【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 .本文不是官方文档的翻译. ...
随机推荐
- 深入理解React虚拟DOM
一.什么是虚拟DOM 虚拟DOM可以看做一棵模拟了DOM树的JavaScript对象树.比如: var element = { element: 'ul', props: { id:"uli ...
- python2与python3下的base64模块
Python2的编解码 python2中程序数据类型默认为ASCII,所以需要先将数据解码(decode)成为Unicode类型,然后再编码(encode)成为想要转换的数据类型(gbk,utf-8, ...
- 为啥国内互联网公司都用centos而不是ubuntu?
一直以来都很好奇ubuntu和centos有啥区别,上学时接触的都是ubuntu,自己每次装virtual box的时候都会下个ubuntu,但是公司的服务器上装的都是centos,今天查了下知乎网友 ...
- 服务发现与注册-Eureka
1.搭建 创建一个Springboot项目,添加依赖 <dependencies> <!--添加Eureka服务器端依赖--> <dependency> <g ...
- 各种友(e)善(xin)数论总集(未完待续),从入门到绝望
目录 快速幂 扩展欧几里得 GCD 扩展欧几里得 同余系列 同余方程 同余方程组 一点想法 高次同余方程 BSGS exBSGS 线性筛素数 埃式筛 欧拉筛 欧拉函数 讲解 两道水题 法雷级数 可见点 ...
- Linux5个数据段
进程(执行的程序)会占用一定数量的内存,它或是用来存放从磁盘载入的程序代码,或是存放取自用户输入的数据等等.不过进程对这些内存的管理方式因内存用途不一而不尽相同,有些内存是事先静态分配和统一回 ...
- BZOJ 4393: [Usaco2015 Dec]Fruit Feast
DP #include<cstdio> using namespace std; int T,A,B,F[5000005],G[5000005]; int main(){ scanf(&q ...
- Django基于Pycharm开发之四[关于静态文件的使用,配置以及源码分析](原创)
对于django静态文件的使用,如果开发过netcore程序的开发人员,可能会比较容易理解django关于静态文件访问的设计原理,个人觉得,这是一个middlerware的设计,但是在django中我 ...
- 在 Amazon AWS 搭建及部署网站:(二)安装、配置软件,启动网站
现在,我们已经有了一台EC2主机,具备了基本的硬件环境.下面,开始软件环境的配置. 第一步:连接服务器 后面所有的一切,都需要在SSH终端窗口操作.首先,我们需要一个SSH客户端.PuTTY是很常用的 ...
- [netty4][netty-common]Future与Promise分析
接口与类结构体系 -- [I]java.util.concurrent.Future<V> ---- [I]io.netty.util.concurrent.Future<V> ...