【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 .本文不是官方文档的翻译. ...
随机推荐
- C#自减运算符
一.C#自减运算符(--) 自减运算符(--)是将操作数减1. 1. 前缀自减运算符 前缀自减运算符是“先减1,后使用”.它的运算结果是操作数减1之后的值. 例如: --x; // 前缀自减运算符 ...
- C#的接口基础教程之七 覆盖虚接口
有时候我们需要表达一种抽象的东西,它是一些东西的概括,但我们又不能真正的看到它成为一个实体在我们眼前出现,为此面向对象的编程语言便有了抽象类的概念.C#作为一个面向对象的语言,必然也会引入抽象类这一概 ...
- java链接MySQL数据库时使用com.mysql.jdbc.Connection的包会出红线问题 java.lang.ClassNotFoundException: com.mysql.jdbc.Driver问题
package com.swift; //这里导入的包是java.sql.Connection而不是com.mysql.jdbc.Connection import java.sql.Connecti ...
- react的redux无状态组件
Provider功能主要为以下两点: 在原应用组件上包裹一层,使原来整个应用成为Provider的子组件 接收Redux的store作为props,通过context对象传递给子孙组件上的connec ...
- Python基础2-Python中文乱码(转)
转自:https://blog.csdn.net/apache0554/article/details/53889253 前言:中文编码问题一直是程序员头疼的问题,而Python2中的字符编码足矣令新 ...
- Python_装饰器、迭代器、生成器
一.装饰器 装饰器的存在是为了实现开放封闭原则: 封闭: 已实现的功能代码块不应该被修改: 开放: 对现有功能的扩展开放. 理解装饰器的三要素: 函数的作用域 高阶函数 闭包 1. 闭包 闭包定义:如 ...
- php扩展开发-快速上手
系统环境CentOS release 6.5 (Final) PHP版本php-5.6.27 扩展开发需要有php环境及php的源代码,我的PHP安装目录/home/zhangxiaomin/stud ...
- Firebase Cloud Function 编写与部署
1.设置和初始化 Firebase SDK for Cloud Functions (1).Cloud Functions 运行的是 Node v6.14.0,因此需要安装nodejs: https: ...
- day 71 Django基础六之ORM中的锁和事务
Django基础六之ORM中的锁和事务 本节目录 一 锁 二 事务 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 锁 行级锁 select_for_update(no ...
- VS2010官方下载地址
http://download.microsoft.com/download/2/4/7/24733615-AA11-42E9-8883-E28CDCA88ED5/X16-42552VS2010Ult ...