轻松掌握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写法要使用switchif 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使用方法的更多相关文章

  1. Redux状态管理方法与实例

    状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http: ...

  2. 轻松理解Redux原理及工作流程

    轻松理解Redux原理及工作流程 Redux由Dan Abramov在2015年创建的科技术语.是受2014年Facebook的Flux架构以及函数式编程语言Elm启发.很快,Redux因其简单易学体 ...

  3. react中界面跳转 A界面跳B界面,返回A界面,A界面状态保持不变 redux的state方法

    在上一篇文章中说过了react中界面A跳到B,返回A,A界面状态保持不变,上篇中使用的是传统的localStorage方法,现在来使用第二种redux的state方法来实现这个功能 现在我刚接触red ...

  4. struts2学习笔记之八:Action中方法的动态调用

    方法一:action名称+!+方法名称+后缀 Action类中增加addUser()和delUser()方法, package com.djoker.struts2; import org.apach ...

  5. [转] 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 ...

  6. struts2的Action该方法不能去

    最近做的一个特征,使用struts2,input标签内容,并与相应的内容背景的实体类,当提交方法,无法进入action该方法和程序没有报错被,检验N通方法还没有找到,查找终于找到了,它是input标签 ...

  7. struts 中自定义action访问方法

    struts中action类继承了ActionSupport  默认实现了execute()方法 struts.xml配置文件中 然后可以配置如下映射: <package name =" ...

  8. Struts2_day01--访问action的方法

    访问action的方法(重点) 1 有三种方式实现 第一种 使用action标签的method属性,在这个属性里面写执行的action的方法名称 第二种 使用通配符方式实现 第三种 动态访问实现(不用 ...

  9. Action的方法访问

    -------------------siwuxie095 Action 的方法访问 Action 的方法访问方式共有三种,如下: 1.通过 method 属性的配置实现 在 action 标签的 m ...

  10. redux之createStore方法底层封装模拟

    首先在看代码之前让我们一起回顾下redux的思想吧   首先redux就是一个MVC思想的框架,他总体是遵循数据的单向流动自顶向下流动 在我们仓库中有一个initState用来存储着我们的初始数据 另 ...

随机推荐

  1. Stuck on "Authenticating with iTunes Store"

    https://forums.developer.apple.com/thread/76803 Try this, it fixed it for me. Open Terminal and run: ...

  2. python no module named builtins

    使用python2时出现此错误. 解决办法: pip install future

  3. 原生开发小程序 和 wepy 、 mpvue, Taro 对比

    https://blog.csdn.net/yang450712123/article/details/79623518 mpvue https://www.cnblogs.com/bgwhite/p ...

  4. Hbase启动hbase shell运行命令报Class path contains multiple SLF4J bindings.错误

    1:Hbase启动hbase shell运行命令报Class path contains multiple SLF4J bindings.错误,是因为jar包冲突了,所以对于和hadoop的jar包冲 ...

  5. CentOS升级glibc-2.14

    升级glibc-2.14用到的rpm https://pan.baidu.com/s/1v-Uk579TGM6498cExst6ow 先要安装gcc yum -y install gcc 执行: rp ...

  6. 山寨版 WP8.1 Cortana 启动 PC

    8.1 dev preview 发布以来 Cortana 很受关注 前一段看到有视频演示用 Cortana 来启动 PC 看视频也是启动第三方应用实现的,简单来弄其实就是个语音启动应用 + 网络唤醒么 ...

  7. Spring MVC基础知识整理➣国际化和异常处理

    概述 Spring框架为WEB项目提供了国际化以及异常处理机制.所谓的国际化也就是不同国籍,显示不同国籍的语言与符号.异常处理,也就是能够捕获WEB项目下的所有异常信息,并能处理记录这些异常信息机制. ...

  8. 基于Postman的API自动化测试

    https://segmentfault.com/a/1190000005055899 1. 安装 两种安装方式,我热衷于以chrome插件形式安装 Chrome插件 Mac App 2. 发送请求 ...

  9. 【转】Android 模拟器横屏竖屏切换设置

    http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04   来源:设计与开发   ...

  10. 系统环境变量(就是不需要切换目录,敲击“python”就可以进入编码器)

    1.右击我的电脑,选择属性,选择“高级系统设置” 2.选择高级,选择环境变量 3.在系统变量中找到path,点击编辑.然后新建,将python的路径复制进去,点击确定.