资讯专栏INFORMATION COLUMN

js手札--redux简单学习(二)

Anleb / 1583人阅读

摘要:简单学习二简单学习,合并多个如有下面两个,,换成,则为则调用时可以写成这样

redux简单学习(二)

redux简单学习[ store, action, reducer ]

1. combineReducers

combineReducers,合并多个reducer

如有下面两个reducer,todoApp,textApp

// reducers/todoApp.js

export default function todoApp(state, action) {
  switch (action.type) {
    case "add":
      return Object.assign({}, state, {
          result : action.a + action.b
      })
    case "sub":
      return Object.assign({}, state, {
          result : action.a - action.b
      })
    default:
      return state
  }
}
// reducers/textApp.js

export default function todoApp(state, action) {
  switch (action.type) {
    case "normal":
      return Object.assign({}, state, {
          result : action.text
      })
    case "camel":
      return Object.assign({}, state, {
          result : action.text.replace(/-[^-]{1}/g, (m) => m[1].toUpperCase())
      })
    default:
      return state
  }
}

换成combineReducers,则为

// reducers/index.js

import { combineReducers } from "redux";
import textApp from "./textApp";
import todoApp from "./todoApp";

export default combineReducers({
  textApp,
  todoApp
});

则调用时可以写成这样

import reducer from "./reducers"

let store = createStore(reducer);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79568.html

相关文章

  • js手札--redux简单学习[ store, action, reducer ]

    摘要:简单学习前言是一套流的处理机制。可以说是真正的管理者,其他的,如是命令,是执行命令的士兵。打印初始状态每次更新时,打印日志注意返回一个函数用来注销监听器发起一系列停止监听更新简单学习二 Redux简单学习 - [ store, action, reducer ] 前言 redux是一套state流的处理机制。 主要有三要素: store 【长官】 管理状态,...

    wyk1184 评论0 收藏0
  • js手札--关于事件冒泡与事件捕获

    摘要:一冒泡和捕获事件执行子元素在执行某个事件的前后,会引起上层元素触发相同事件。三补充关于和这两个其实和捕获与冒泡一点关系都没有,是用来阻止事件的默认行为的。 一、冒泡和捕获 事件执行:子元素在执行某个事件的前后,会引起上层元素触发相同事件。例:我点击了div,那么不光div会执行click事件,上层的body和html等等也会执行click。 冒泡与捕获解决了:事件执行顺序由谁开始,由谁...

    lentoo 评论0 收藏0
  • 前端临床手札——单元测试

    摘要:感觉不能这样下去就学写一下单元测试,等他更新代码我都跑一遍确认一下,这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习 最近博主工作是和另一枚后端合作,但是经常发现他写的接口出错,苦逼连连。感觉不能这样下去就学写一下单元测试,等他更新代码我都跑一遍确认一下,这样工作安心多了。 经过博主一番查找,貌似被推荐比较多的有mocha和chai,下面记录简...

    kid143 评论0 收藏0
  • 前端临床手札——单元测试

    摘要:感觉不能这样下去就学写一下单元测试,等他更新代码我都跑一遍确认一下,这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习 最近博主工作是和另一枚后端合作,但是经常发现他写的接口出错,苦逼连连。感觉不能这样下去就学写一下单元测试,等他更新代码我都跑一遍确认一下,这样工作安心多了。 经过博主一番查找,貌似被推荐比较多的有mocha和chai,下面记录简...

    godlong_X 评论0 收藏0
  • js手札--bind

    摘要:三解决方法使用匿名函数其实看看上面的丢失原因之后,就知道了其实的使用权被对象夺去了,而我们需要让夺回的使用权。结合第一种解决方法,大胆的猜测,的伪实现可以是,相当于返回一个匿名函数。 bind { 解决问题:callback() { this ? //谁在用 }} function callback() { console.log(this); } function foo(c...

    RancherLabs 评论0 收藏0

发表评论

0条评论

Anleb

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<