redux reducer笔记
踩坑一,reducer过于抽象
reducer写得没那么抽象也不会有人怪你的。_
reducer其实只有一个,由不同的reducer composition出来的。所以,
- reducer的父作用域是共享的
- 某一个action被发出后,会在总reducer中进行查找出来的reducer代码
例如:
//reducer01.js
const disposeFetchRandom = (preState = {}, action) => {
switch (action.type) {
case `${REQUEST_BEGIN}${action.condition}`:
case `${RECEIVED}${action.condition}`:
case `${RECEIVE_FAILED}${action.condition}`:
//do something to state
default:
return preState;
}
}
和
//reducer02.js
const disposeCategories = (preState = {}, action) => {
let condition = action.condition
switch (action.type) {
case `${REQUEST_BEGIN}${condition}`:
case `${RECEIVED}${condition}`:
case `${RECEIVE_FAILED}${condition}`:
//do something
default:
return preState
}
}
针对上面两个Reducer:
- 当
dispatch({type: "REQUEST_BEGIN_RANDOM"})
时,reducer01.js
与reducer02.js
都会对其进行处理 - 无法处理
dispatch({type: "REQUEST_BEGIN_RANDOM})
和dispatch({type: "REQUEST_BEGIN_CATEGORIES"})
这两个action - 解决办法。改为(以reducer01.js为例)
//reducer01.js
const RANDOM = "_RANDOM";
const disposeFetchRandom = (preState = {}, action) => {
switch (action.type) {
case REQUEST_BEGIN + RANDOM://必须明确指定action.type
case RECEIVED + RANDOM:
case RECEIVE_FAILED + RANDOM:
//do something to state
default:
return preState;
}
}
redux reducer笔记的更多相关文章
- React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- 【原】redux学习笔记
上周学习了flux,这周研究了一下redux,其实很早之前都已经在研究他们了,只是之前一直没搞懂,最近这两周可能打通了任督二脉,都算入门了. 写博客的目的主要是做一下笔记,总结一下思路,以及和大家交流 ...
- redux学习笔记
中文api:http://cn.redux.js.org/docs/react-redux/troubleshooting.html 3.6 Reducer Store 收到 Action 以后,必须 ...
- [Redux] Reducer Composition with Arrays
In the previous lesson we created a reducer that can handle two actions, adding a new to-do, and tog ...
- Redux学习笔记:Redux简易开发步骤
该文章不介绍Redux基础,也不解释各种乱乱的概念,网上一搜一大堆.只讲使用Redux开发一个功能的步骤,希望可以类我的小白们,拜托它众多概念的毒害,大牛请绕道! 本文实例源代码参考:React-Re ...
- Redux 学习笔记
1:首先安装redux: npm install --save redux 2:引入redux : import { createStore } from 'redux'; //首先创建执行函数,Re ...
- Redux学习笔记--异步Action和Middleware
异步Action 之前介绍的都是同步操作,Redux通过分发action处理state,所有的数据流都是同步的,如果需要一步的话怎么办? 最简单的方式就是使用同步的方式来异步,将原来同步时一个acti ...
- Redux学习笔记-基础知识
Redux概述 是什么:Redux是管理状态的容器,提供可预测的状态管理. 怎么做:Redux主要是用来管理组件或者应用的状态,本质上跟一个事件处理器差不多.通过分发action触发reduce来 ...
- Redux学习笔记-----基础部分
Redux的基本原则 唯一数据源(应用的状态数据应该只存储在唯一的一个store上): 保持状态只读(不能直接修改Store的状态,而是应该通过派发一个action对象来完成) 数据改变只能通过纯函数 ...
随机推荐
- SQL,NoSQL和NewSQL的区别
SQL(Structured Query Language):数据库,指关系型数据库.主要代表:SQL Server.Oracle.MySQL.PostgreSQL. NoSQL(Not Only S ...
- LiveCD 修复Grub引导
/usr/sbin/grub-probe: error: failed to get canonical path of /cow 如果你是从这句报错search过来的,恭喜您!看来你也是一个调皮的孩 ...
- C语言设计模式
一 .C语言和设计模式(继承.封装.多态) C++有三个最重要的特点,即继承.封装.多态.我发现其实C语言也是可以面向对象的,也是可以应用设计模式的,关键就在于如何实现面向对象语言的三个重要属性. ( ...
- iOS - 在xib中UILabel文字如何换行
在换行的位置按住Option + Enter键即可换行
- 初识内存挂:VirtualNES金手指教程
一.什么VirtualNES?什么是金手指? VirtualNES是一个NES模拟器,用来运行.nes文件,即在电脑上玩当年小霸王游戏机上的游戏.而它内置了一个简单的Cheat Engine,称之为金 ...
- fedora清理旧内核
先查看已安装的内核: rpm -qa|grep kernel 然后查看下当前在用的内核: uname -r 最后是删除内核: yum remove xxxx
- svg轻松实现文字水印
1. 水印图片生成采用svg,这样可以运行时生成名字或其他信息的图片 svg模板 <svg xmlns="http://www.w3.org/2000/svg" xmlns: ...
- phpspreadsheet 中文文档(二) 结构+自动筛选
2019年10月11日13:55:41 原理图 自动加载器 PhpSpreadsheet依赖于Composer自动加载器.因此,在独立使用PhpSpreadsheet之前,请确保先运行composer ...
- ETF:pcf文件制作
pcf文件依赖数据: ETF基本信息() 指数权重文件(次日权重文件,中证指数公司) 现金替代标志文件(根据中证指数的停复牌文件) 净值文件(基金公司估值系统计算) 成分股数量计算公式: 1.估值系统 ...
- elasticsearch-head
elasticsearch-head 是用于监控 Elasticsearch 状态的客户端插件,包括数据可视化.执行增删改查操作等 安装前先安装nodejs 1.下载 地址 2.安装 npm ins ...