轻松掌握Redux-Action使用方法
轻松掌握Redux-Action使用方法
Redux-Action主要有两个方法,createAction和createAction,只要掌握了这两个方法就会了redux-action的使用。
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
操作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);
轻松掌握Redux-Action使用方法的更多相关文章
- Redux状态管理方法与实例
状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http: ...
- 轻松理解Redux原理及工作流程
轻松理解Redux原理及工作流程 Redux由Dan Abramov在2015年创建的科技术语.是受2014年Facebook的Flux架构以及函数式编程语言Elm启发.很快,Redux因其简单易学体 ...
- react中界面跳转 A界面跳B界面,返回A界面,A界面状态保持不变 redux的state方法
在上一篇文章中说过了react中界面A跳到B,返回A,A界面状态保持不变,上篇中使用的是传统的localStorage方法,现在来使用第二种redux的state方法来实现这个功能 现在我刚接触red ...
- struts2学习笔记之八:Action中方法的动态调用
方法一:action名称+!+方法名称+后缀 Action类中增加addUser()和delUser()方法, package com.djoker.struts2; import org.apach ...
- [转] How to dispatch a Redux action with a timeout?
How to dispatch a Redux action with a timeout? Q I have an action that updates notification state of ...
- struts2的Action该方法不能去
最近做的一个特征,使用struts2,input标签内容,并与相应的内容背景的实体类,当提交方法,无法进入action该方法和程序没有报错被,检验N通方法还没有找到,查找终于找到了,它是input标签 ...
- struts 中自定义action访问方法
struts中action类继承了ActionSupport 默认实现了execute()方法 struts.xml配置文件中 然后可以配置如下映射: <package name =" ...
- Struts2_day01--访问action的方法
访问action的方法(重点) 1 有三种方式实现 第一种 使用action标签的method属性,在这个属性里面写执行的action的方法名称 第二种 使用通配符方式实现 第三种 动态访问实现(不用 ...
- Action的方法访问
-------------------siwuxie095 Action 的方法访问 Action 的方法访问方式共有三种,如下: 1.通过 method 属性的配置实现 在 action 标签的 m ...
- redux之createStore方法底层封装模拟
首先在看代码之前让我们一起回顾下redux的思想吧 首先redux就是一个MVC思想的框架,他总体是遵循数据的单向流动自顶向下流动 在我们仓库中有一个initState用来存储着我们的初始数据 另 ...
随机推荐
- Stuck on "Authenticating with iTunes Store"
https://forums.developer.apple.com/thread/76803 Try this, it fixed it for me. Open Terminal and run: ...
- python no module named builtins
使用python2时出现此错误. 解决办法: pip install future
- 原生开发小程序 和 wepy 、 mpvue, Taro 对比
https://blog.csdn.net/yang450712123/article/details/79623518 mpvue https://www.cnblogs.com/bgwhite/p ...
- Hbase启动hbase shell运行命令报Class path contains multiple SLF4J bindings.错误
1:Hbase启动hbase shell运行命令报Class path contains multiple SLF4J bindings.错误,是因为jar包冲突了,所以对于和hadoop的jar包冲 ...
- CentOS升级glibc-2.14
升级glibc-2.14用到的rpm https://pan.baidu.com/s/1v-Uk579TGM6498cExst6ow 先要安装gcc yum -y install gcc 执行: rp ...
- 山寨版 WP8.1 Cortana 启动 PC
8.1 dev preview 发布以来 Cortana 很受关注 前一段看到有视频演示用 Cortana 来启动 PC 看视频也是启动第三方应用实现的,简单来弄其实就是个语音启动应用 + 网络唤醒么 ...
- Spring MVC基础知识整理➣国际化和异常处理
概述 Spring框架为WEB项目提供了国际化以及异常处理机制.所谓的国际化也就是不同国籍,显示不同国籍的语言与符号.异常处理,也就是能够捕获WEB项目下的所有异常信息,并能处理记录这些异常信息机制. ...
- 基于Postman的API自动化测试
https://segmentfault.com/a/1190000005055899 1. 安装 两种安装方式,我热衷于以chrome插件形式安装 Chrome插件 Mac App 2. 发送请求 ...
- 【转】Android 模拟器横屏竖屏切换设置
http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04 来源:设计与开发 ...
- 系统环境变量(就是不需要切换目录,敲击“python”就可以进入编码器)
1.右击我的电脑,选择属性,选择“高级系统设置” 2.选择高级,选择环境变量 3.在系统变量中找到path,点击编辑.然后新建,将python的路径复制进去,点击确定.