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对象来完成) 数据改变只能通过纯函数 ...
随机推荐
- Spring Boot-JPA、Hibernate、Spring data jpa之间的关系
什么么是JPA? 全称Java Persistence API,可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1)ORM映射元数据:JPA支 ...
- linux中nohup 与 & 的区别
Linux/Unix下,通常只有守护进程可在脱离终端的情况下能继续执行,而普通进程在关闭终端时会因收到SIGHUP信号(挂起信号)而退出.当终端退出后,由该终端启动的后台程序自动退出. 若想命令在后台 ...
- wx.request 请求与django
wx.request 1.wx.request相当于ajax请求,和django后台进行交互 官方文档:https://developers.weixin.qq.com/miniprogram/dev ...
- EF获取当天的数据集合
).DefaultIfEmpty().Count(); 主要是使用了: DbFunctions.DiffDays
- API调试工具--------Postman
Postman一款非常流行的API调试工具.其实,开发人员用的更多.因为测试人员做接口测试会有更多选择,例如Jmeter.soapUI等.不过,对于开发过程中去调试接口,Postman确实足够的简单方 ...
- 006-nginx.conf详解-error_page 使用
一.概述 nginx指令error_page的作用是当发生错误的时候能够显示一个预定义的uri 1.1.使用步骤 更改nginx.conf在http定义区域加入: proxy_intercept_er ...
- iredmail开源邮件系统部署
Iredmail 安装前注意事项: 通过官网了解iRedMail: 2. 选择相应的linux发行版(我选的是64位的CentOS6.4,iRedMail-0.8.6.tar.bz2) ired ...
- 运行应用-使用Deployment运行无状态应用程序
以下介绍如何使用kubernetes的deployment对象运行应用程序. 目标 - 创建nginx deployment. - 使用kubectl列出有关部署的信息. - 更新部署 创建和探索ng ...
- 使用自定义注解和AOP管理shiro权限
一.场景 在使用shiro框架的时候,遇到了这样的需求:本系统有多个用户,每个用户分配不同角色,每个角色的权限也不一致.比如A用户拥有新闻列表的增删改查权限,而B用户只有查看新闻列表的权限,而没有删除 ...
- git clone 某个链接时候报错Initialized empty Git repository in 不能克隆
查看下是不是git是不是1.7.1版本. git --version 使用 yum -y update 更新一下. 再使用git clone 虽然还是会提示这个报错,但是可以克隆了.亲测有效. git ...