其作用都是用来简化action、reducer。

1.安装

npm install --save redux-actions
// 或
yarn add redux-actions

2.使用

createAction

原来创建action:

const action = { type: START };

使用redux-actions创建action:

import { createAction } from 'redux-actions';
const action = createAction(START);
// 注:
export const increment = createAction('INCREMENT')
export const decrement = createAction('DECREMENT')
// 等于:
increment() // { type: 'INCREMENT' }
decrement() // { type: 'DECREMENT' }

handleActions

原来的reducer

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-actions的更多相关文章

  1. [React + Functional Programming ADT] Connect State ADT Based Redux Actions to a React Application

    With our Redux implementation lousy with State ADT based reducers, it is time to hook it all up to a ...

  2. [Functional Programming ADT] Adapt Redux Actions/Reducers for Use with the State ADT

    By using the State ADT to define how our application state transitions over time, we clear up the ne ...

  3. React + Redux 入坑指南

    Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...

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

  5. 一个超级简单的demo带你走进redux的大坑

    先上代码 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { createStor ...

  6. Redux 介绍

    本文主要是对 Redux 官方文档 的梳理以及自身对 Redux 的理解. 单页面应用的痛点 对于复杂的单页面应用,状态(state)管理非常重要.state 可能包括:服务端的响应数据.本地对响应数 ...

  7. react_结合 redux - 高阶函数 - 高阶组件 - 前端、后台项目打包运行

    Redux 独立的集中式状态管理 js 库 - 参见 My Git 不是 react 库,可以与 angular.vue 配合使用,通常和 react 用 yarn add redux import ...

  8. 一个Time TodoList实例了解redux在wepy中的使用

    @subject: wepy-redux-time-todo @author: leinov @date:2018-10-30 @notice: 小程序(wepy)开发群110647537 欢迎加入 ...

  9. react脚手架改造(react/react-router/redux/eslint/karam/immutable/es6/webpack/Redux DevTools)

    公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...

  10. 结合React使用Redux

    前面的两篇文章我们认识了 Redux 的相关知识以及解决了如何使用异步的action,基础知识已经介绍完毕,接下来,我们就可以在React中使用Redux了. 由于Redux只是一个状态管理工具,不针 ...

随机推荐

  1. cobbler部署安装

    挂载光驱 # mount /dev/cdrom /mnt/ 安装cobbler所需软件 # yum install cobbler cobbler-web dhcp tftp-server pykic ...

  2. head first (二):观察者模式

    首先推荐一下别人写的,很不错可以参考,http://www.cnblogs.com/li-peng/archive/2013/02/04/2892116.html 1.定义 观察者模式:在对象之间定义 ...

  3. JNI基础学习

    1.JNI(Java Native Interface): 它允许Java代码和其他语言写的代码进行交互,JNI一开始是为了本地已编译语言,尤其是C和C++而设计的,但是它并不妨碍你使用其他语言,只要 ...

  4. 差分数组 and 树上差分

    差分数组 定义 百度百科中的差分定义 //其实这完全和要讲的没关系 qwq 进去看了之后是不是觉得看不懂? 那我简单概括一下qwq 差分数组de定义:记录当前位置的数与上一位置的数的差值. 栗子 容易 ...

  5. 简单DP【p1934】封印

    Description 很久以前,魔界大旱,水井全部干涸,温度也越来越高.为了拯救居民,夜叉族国王龙溟希望能打破神魔之井,进入人界"窃取"水灵珠,以修复大地水脉.可是六界之间皆有封 ...

  6. Proxy(2016山东省省赛C)(最短路)(spfa)

    问题 C: Proxy 时间限制: 2 Sec  内存限制: 128 MB提交: 17  解决: 5[提交][状态][讨论版] 题目描述 Because of the GFW (Great Firew ...

  7. rsync用于同步目录

    rsync是unix/linux下同步文件的一个高效算法,它能同步更新两处计算机的文件与目录,并适当利用查找文件中的不同块以减少数据传输.rsync中一项与其他大部分类似程序或协定中所未见的重要特性是 ...

  8. Spring中BeanFactory和ApplicationContext的区别

    1. BeanFactory负责读取bean配置文档,管理bean的加载,实例化,维护bean之间的依赖关系,负责bean的生命周期. 2. ApplicationContext除了提供上述BeanF ...

  9. 【最小割】【Dinic】【强联通分量缩点】bzoj1797 [Ahoi2009]Mincut 最小割

    结论: 满足条件一:当一条边的起点和终点不在 残量网络的 一个强联通分量中.且满流. 满足条件二:当一条边的起点和终点分别在 S 和 T 的强联通分量中.且满流.. 网上题解很多的. #include ...

  10. 【莫比乌斯反演+分块】BZOJ1101-[POI2007]Zap

    [题目大意] 对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd(x,y)=d. [思路] 前面的思路同HDU1695 不过不同的是这道题中(a,b)和(b ...