踩坑一,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. Understanding Variational Autoencoders (VAEs)

    Understanding Variational Autoencoders (VAEs) 2019-09-29 11:33:18 This blog is from: https://towards ...

  2. XML-Signature 语法和签名

    一段  XML-signature  的 demo: <Signature xmlns="http://www.w3.org/2000/09/xmldsig#"> &l ...

  3. Supervisor进程守护工具的使用

    Supervisor是一个 Python 开发的 client/server 系统,可以管理和监控类 UNIX 操作系统上面的进程. 官网:http://supervisord.org/      G ...

  4. vmare_mac 关闭完整性检查

    今天在vmware 15 安装mac10.13,安装之后不能全屏,查了很多资料最后完美解决 首先我们需要进入mac的恢复模式 等待出现苹果LOGO,直到进度条加载完毕 然后打开实用工具-终端 关闭SI ...

  5. 【C#】使用C# 读取Http的Post数据

    private string Post(string num) { Encoding myEncoding = Encoding.GetEncoding("gb2312"); // ...

  6. Centos7无法播放mp4视频(待验证)

    新安装Centos7后,发现无法正常播放本地mp4视频 可以尝试安装 yum -y install ffmpeg 安装之后,需要重启电脑才能生效 浏览器安装年flash,只能播放部分视频,也有可能是s ...

  7. SQL Server表分区(转)

    什么是表分区 一般情况下,我们建立数据库表时,表数据都存放在一个文件里. 但是如果是分区表的话,表数据就会按照你指定的规则分放到不同的文件里,把一个大的数据文件拆分为多个小文件,还可以把这些小文件放在 ...

  8. Blazor 机制初探以及什么是前后端分离,还不赶紧上车?

    标签: Blazor .Net 上一篇文章发了一个 BlazAdmin 的尝鲜版,这一次主要聊聊 Blazor 是如何做到用 C# 来写前端的,传送门:https://www.cnblogs.com/ ...

  9. Win10 专业版 Hyper-V 主机计算服务无法启动

    Windows 10升级1809版本后,发现Hyper-V不能用了,管理器里是一片空白,看服务Hyper-V 主机计算服务没有启动,手动启动的话失败,报错,代码1053. 自己尝试修复,也百度了很久, ...

  10. activiti学习5:开启流程和流程前进

    目录 activiti学习5:开启流程和流程前进 一.流程和任务的关系 二.开启流程 2.1根据流程定义key开启流程 三.查询用户任务 3.1 TaskQuery 四.完成任务 activiti学习 ...