踩坑一,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. Spring Cloud上下文:应用程序上下文服务

    Spring Boot对于如何使用Spring构建应用程序有一个看法:例如它具有常规配置文件的常规位置,以及用于常见管理和监视任务的端点.Spring Cloud建立在此之上,并添加了一些可能系统中所 ...

  2. HTML5中使用EventSource实现服务器发送事件

    在HTML5的服务器发送事件中,使用EventSource对象可以接收服务器发送事件的通知. 示例: es.html <!DOCTYPE html> <html> <he ...

  3. odoo开发笔记 -- 借助模块queue_job实现异步方法调用

    场景描述: 对比了几个定时调度的框架,发现各有优缺点: celery 很强,异步定时调度,异步周期调度,也有延时调度的功能,但是延时调度的案例比较少,遂暂时不使用. queue_job,一个odoo第 ...

  4. Python logging模块日志存储位置踩坑

    问题描述 项目过程中写了一个小模块,设计到了日志存储的问题,结果发现了个小问题. 代码结构如下: db.py run.py 其中db.py是操作数据库抽象出来的一个类,run.py是业务逻辑代码.两个 ...

  5. 《绯雨骑士团》Demo,框架实现,寻路打怪

    在家无事花几天做了个放置挂机demo,做着玩吧.和海拓的<凡人修仙传>类似吧,自动挂机刷怪打boss数值游戏,但是我比较喜欢二次元的,所以选了<绯雨骑士团>的资源. 参考了以下 ...

  6. webuploader超时时间timeout设置

    参考:http://www.codingwhy.com/view/841.html 备注下!

  7. djang-celery使用带密码的redis

    前言: 网上很多django-celery使用redis(使用不带密码的redis)的用法都是千篇一律,那带密码的redis该怎么使用了呢,没有看到一篇有帮助的,在官网搜了下,发现以下用法,请看下面 ...

  8. java Random 随机密码

    /** * Created by xc on 2019/11/23 * 生成随机密码:6位数字 */public class Test7_4 { public static void main(Str ...

  9. Docker 运行Kafka容器

    1. 启动Zookeeper docker run -d --name zookeeper -p 2181:2181 -t wurstmeister/zookeeper 2. 启动Kafka dock ...

  10. python 实现一个简单tcp epoll socket

    python 实现一个epoll server #!/usr/bin/env python #-*- coding:utf-8 -*- import socket import select impo ...