踩坑一,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. sigmoid与softmax 二分类、多分类的使用

    二分类下,sigmoid.softmax两者的数学公式是等价的,理论上应该是一样的,但实际使用的时候还是sigmoid好 https://www.zhihu.com/question/29524708 ...

  2. SNF快速开发平台2020版

    SNF快速开发平台分如下子平台: 1.CS快速开发平台 2.BS快速开发平台 3.H5移动端快速开发平台 4.软件开发机器人平台 配置型开发零编程 SNF快速开发平台是一个比较成熟的.net领域的商业 ...

  3. SpringBoot Aop打印参数

    import java.util.Enumeration; import javax.servlet.http.HttpServletRequest; import lombok.extern.slf ...

  4. Intelij idea 中文字体渲染异常解决方法

    当 Font 选择的字体无法渲染时,则尝试使用该选项所选择的字体渲染.

  5. python初级(302) 6 对象(二)

    一.复习 1.什么是对象 2.什么是类 3.什么是属性 4.什么是方法 5.创建一个dog类,dog的属性有颜色,方法有汪汪叫 随堂练习: class Dog: def __init__(self, ...

  6. sublime text 文件列表如何忽略特定格式的文件名

    1.只需要Preferences (中文首选项)里面找到setting-default(设置默认)     2.在设置面板里面找到 "folder_exclude_patterns" ...

  7. (十二)springboot中shiro的使用

    一.引入maven配置 <dependency>     <groupId>org.apache.shiro</groupId>     <artifactI ...

  8. oracle 高级用法, DECODE 排序, OVER(PARTITION BY X ORDER BY Y DESC) 开窗函数

    场景 01 (IN 语句 排序 decode() 函数): 1,我们在查询中会经常使用这样的用法, select * from table_name t where t.id in (1, 3, 7, ...

  9. 工具分享:excel2json,将Excel表格转换为JSON

    此次分享的是github上的一个开源小工具:excel2json,用于把Excel表转换成json对象,并保存到一个文本文件. 项目地址:https://github.com/neil3d/excel ...

  10. VS2017/VS 2019查看源代码

    通过VS2017/VS 2019使用F12 查看DLL源代码   今天在一本书中偶然看到原来VS2017中是可以查看dll中的源码,具体步骤是:工具>选项>文本编辑器>c#>高 ...