踩坑一,reducer过于抽象

reducer写得没那么抽象也不会有人怪你的。_

reducer其实只有一个,由不同的reducer composition出来的。所以,

  1. reducer的父作用域是共享的
  2. 某一个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:

  1. dispatch({type: "REQUEST_BEGIN_RANDOM"})时,reducer01.jsreducer02.js都会对其进行处理
  2. 无法处理dispatch({type: "REQUEST_BEGIN_RANDOM})dispatch({type: "REQUEST_BEGIN_CATEGORIES"})这两个action
  3. 解决办法。改为(以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笔记的更多相关文章

  1. React+Redux学习笔记:React+Redux简易开发步骤

    前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...

  2. 【原】redux学习笔记

    上周学习了flux,这周研究了一下redux,其实很早之前都已经在研究他们了,只是之前一直没搞懂,最近这两周可能打通了任督二脉,都算入门了. 写博客的目的主要是做一下笔记,总结一下思路,以及和大家交流 ...

  3. redux学习笔记

    中文api:http://cn.redux.js.org/docs/react-redux/troubleshooting.html 3.6 Reducer Store 收到 Action 以后,必须 ...

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

  5. Redux学习笔记:Redux简易开发步骤

    该文章不介绍Redux基础,也不解释各种乱乱的概念,网上一搜一大堆.只讲使用Redux开发一个功能的步骤,希望可以类我的小白们,拜托它众多概念的毒害,大牛请绕道! 本文实例源代码参考:React-Re ...

  6. Redux 学习笔记

    1:首先安装redux: npm install --save redux 2:引入redux : import { createStore } from 'redux'; //首先创建执行函数,Re ...

  7. Redux学习笔记--异步Action和Middleware

    异步Action 之前介绍的都是同步操作,Redux通过分发action处理state,所有的数据流都是同步的,如果需要一步的话怎么办? 最简单的方式就是使用同步的方式来异步,将原来同步时一个acti ...

  8. Redux学习笔记-基础知识

      Redux概述 是什么:Redux是管理状态的容器,提供可预测的状态管理. 怎么做:Redux主要是用来管理组件或者应用的状态,本质上跟一个事件处理器差不多.通过分发action触发reduce来 ...

  9. Redux学习笔记-----基础部分

    Redux的基本原则 唯一数据源(应用的状态数据应该只存储在唯一的一个store上): 保持状态只读(不能直接修改Store的状态,而是应该通过派发一个action对象来完成) 数据改变只能通过纯函数 ...

随机推荐

  1. JVM探究之 —— 垃圾回收(二)

    1. 垃圾收集算法 1.1 标记清除(Mark-Sweep)算法 标记—清除算法是第一种使用和比较完善的垃圾回收算法,后续的收集算法都是基于其设计思路并对其不足进行改进而得到的. 该算法分为“标记”和 ...

  2. 【C++】C++中重载运算符和类型转换

    输入输出运算符 输入输出运算符 输入输出运算符 算术和关系运算符 相等运算符 关系运算符 赋值运算符 复合赋值运算符 下标运算符 递增和递减运算符 成员访问运算符 函数调用运算符 lambda是函数对 ...

  3. js开启和关闭页面滚动【亲测有效】

    在移动端的页面开发过程中,经常会遇到点击弹框禁止页面滚动的情景,下面就来说下具体的做法... 第一步:构建一个函数 function bodyScroll(event){ event.preventD ...

  4. EasyNVR摄像机网页无插件直播方案H5前端构建之:如何播放HLS(m3u8)直播流

    背景描述 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术,主要用于PC和Apple终端的音视频服务,包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文 ...

  5. NuxtJS实战,一个博客系统

    前言 这个项目诞生于17年5月,距今已有两年多了,在这两年期间经历了很多变更,从简单到复杂,又从复杂到简单,并且以后一直会保持这种简单状态.最近迎来了一次更新,因此特意分享一下.虽然只有我一个人使用( ...

  6. MyBatis踩坑之SQLProvider转义字符被删除问题

    目录 踩坑背景 问题描述 原因追踪 解决方案 方法一 方法二 踩坑背景 项目架构:Spring Boot + MyBatis + MySQL. 使用MyBatis作为ORM框架,jdbc驱动使用的是m ...

  7. mysql新建用户host使用%但使用localhost无法连接

    今天新建了一个用户,权限也给了,host设置的为% 但是使用该用户连接时出现如下错误 查看用户 mysql> select host,user,password from mysql.user; ...

  8. WinForm自动记录从上次关闭位置启动窗体

    次功能主要是通过在注册表中读写窗体的Location属性来实现的.在窗体关闭前处理窗体的FormClosed事件,将窗体的Location属性值写入注册表,然后在窗体的Load事件中从注册表中读取保存 ...

  9. 20190726_安装CentOS7minimal版本后需要做的优化和配置

    20190726_安装CentOS7minimal版本后需要做的优化和配置 CentOS系统镜像下载地址:https://www.centos.org/ CentOS的Minimal(最小化安装版本) ...

  10. 二级C语言模拟试题(第1套)

    1. 选择题. 1-1,判断各种变量所占的字节数. #include<stdio.h> int main() { char p[] = {'6','2','3'}, *q = p; int ...