【14】redux 之 redux-actions

redux-actions有两大法宝createActionhandleActions.

createAction

http://www.jianshu.com/p/6ba5cd795077

原来创建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``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
时间: 2024-10-24 06:19:40

【14】redux 之 redux-actions的相关文章

[Redux] Understand Redux Higher Order Reducers

Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a new reducer. In that new reducer, you can customize the behaviour of the original one which helps reducing the reducer logic. In this lesson, we'll se

React-安装和配置redux调试工具Redux DevTools

chrome扩展程序里搜索Redux DevTools进行安装 新建store的时候,进行如下配置. import { createStore, applyMiddleware ,compose} from 'redux'; import reducer from './reducer' import thunk from 'redux-thunk' const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? wi

[Redux] Filtering Redux State with React Router Params

We will learn how adding React Router shifts the balance of responsibilities, and how the components can use both at the same time. Now when we click the filter, the url changes, but the todos list doesn't change. So continue with that. Router only r

React loves you — 洞悉Redux装的逼

你若装逼,请带我飞! 从前,从前,听说React只负责UI,话说写Angular代码就像写后端,现在看来,React赢在情怀上了: 我认为没必要老是拿React和Angular做比较,Angular是一套大而全的相对完备的框架:而React确实是只负责UI,只是多出很多概念层的东西,需要自己以此去构造:React更像是打造一个由React作为主线的生态:以component为基础,虚拟DOM解决性能瓶颈,单向数据流统一管理components,webpack.ES6.JSX完美融合,还有Flux

redux 介绍及配合 react开发

前言 本文是 Redux 及 Redux 配合 React 开发的教程,主要翻译自 Leveling Up with React: Redux,并参考了 Redux 的文档及一些博文,相对译文原文内容有增减修改. 目录 前言 目录 什么是 Redux,为什么使用 Redux Redux 的三大基本原则 1.唯一数据源 2.State 是只读的 3.使用纯函数来执行修改 第一个 Redux Store 不要改变原 State , 复制它 复合 Reducer Dispatch 之后哪个 Reduc

我的一个配置redux(实现一个自增功能)之旅

前言 : 今天呢,就配置一下redux,redux的重要性呢,就叭叭叭一大堆,什么也没有带着配置一次来的重要,因为许多涉及到的属性和方法,用法是活的,但格式是需要记忆的. 过程中不要嫌我唠叨,有的地方为了便于理解和记忆,反而会绕一下,配置redux的确比较麻烦,用到我们平时不常用的方法,我们不熟悉他们,所以会使用过程需要记忆. (1)首先呢,安装redux环境 一个稳定版的redux和一个redux绑定库 1 npm install redux --save 2 npm install reac

Redux生态系统

生态系统 Redux 是一个体小精悍的库,但它相关的内容和 API 都是精挑细选的,足以衍生出丰富的工具集和可扩展的生态系统. 如果需要关于 Redux 所有内容的列表,推荐移步至 Awesome Redux.它包含了示例.样板代码.中间件.工具库,还有很多其它相关内容.要想学习 React 和 Redux ,React/Redux Links 包含了教程和不少有用的资源,Redux Ecosystem Links 则列出了 许多 Redux 相关的库及插件. 本页将只列出由 Redux 维护者

ES6+redux实现Counter

react说白了就是用jsx开发一个view层的东西,如果你要想开发一些web端的网页应用,你需要做的就是结合起目前可以管理数据端的一些应用,今天我们说到的是redux,redux我目前学习的也不是很深,前后差不多10天时间,只谈一下自己的理解! 网络上有很多关于redux的讲解,目前觉得阮一峰大神的最适合入门者初学,http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html redux是通过什

node.js学习之react,redux,react-redux

redux好难懂,终于明白了一点,做了个小demo,记录一下. 先看目录结构: src |--index.js |--actions |--index.js |--components |--Additem.js |--App.js |--ItemList.js |--reducers |--index.js 最终效果如图: redux三大件:actions , reducers, store , Action 是把数据从应用(译者注:这里之所以不叫 view 是因为这些数据有可能是服务器响应,

react+redux+webpack+git技术栈

1 一.git bash here 2 mdkr 3 cnpm init -y 4 ls -a 5 ls -l 6 ls -la隐藏的也可查看 7 cat package.json 8 二.npm 9 npm i webpack-dev-server -g 10 全局:任何目录运行 11 本地:本地需要调用附带的插件 12 npm list 13 npm list -g 14 npm uninstall supervisor -g 全局删除 15 npm remove supervisor -g