[Redux] Introduction
Single immutable state tree:
Should be just one single javascript object.
Describing the changes by action:
every change in the application state as a plain JavaScript object called “action”.
Pure Function & Impure Function:
Pure function always return the same result and no side effect.
Impure function, has side effect or return new function.
// Pure functions
function square(x) {
return x * x;
}
function squareAll(items) {
return items.map(square);
} // Impure functions
function square(x) {
updateXInDatabase(x);
return x * x;
}
function squareAll(items) {
for (let i = 0; i < items.length; i++) {
items[i] = square(items[i]);
}
}
The Reducer function:
The function should have a 'previous state', 'the action has been dispatched', '¨next state' and this function should be pure.
Writing a Counter Reducer with Tests
function counter(state, action) { if(typeof state === "undefined"){
return 0;
} if(action.type === "INCREASE"){
state += 1;
return state;
}else if(action.type === "DECREASE"){
state -= 1;
return state;
}else{
return state;
}
} expect(
counter(0, {type: 'INCREASE'})
).toEqual(1); expect(
counter(1, {type: 'INCREASE'})
).toEqual(2); expect(
counter(2, {type: 'DECREASE'})
).toEqual(1); expect(
counter(1, {type: 'DECREASE'})
).toEqual(0); // If the action is unknown, should remain be the previsou state
expect(
counter(1, {type: 'SOMETHING_ELSE'})
).toEqual(1); // If the previous state is undefined, should return the initialize state
expect(
counter(undefined, {})
).toEqual(0); console.log("PASSED!");
Covert to ES6:
const counter = (state = 0, action) => { switch(action.type) {
case "INCREASE:
return state + 1;
case "DECREASE":
return state -1;
default:
return state;
}
}
[Redux] Introduction的更多相关文章
- React笔记
React JS Tutorials for Beginners - 1 - Getting Started https://www.youtube.com/watch?v=-AbaV3nrw6E&a ...
- 为了弄懂Flutter的状态管理, 我用10种方法改造了counter app
为了弄懂Flutter的状态管理, 我用10种方法改造了counter app 本文通过改造flutter的counter app, 展示不同的状态管理方法的用法. 可以直接去demo地址看代码: h ...
- [转] What is the point of redux when using react?
As I am sure you have heard a bunch of times, by now, React is the V in MVC. I think you can think o ...
- 前端小白第一次使用redux存取数据练习
在学习了redux基本教程后,课程参考如下网址:https://www.redux.org.cn/docs/introduction/CoreConcepts.html,开始着手练习 1.首先编写一个 ...
- Vuex、Flux、Redux、Redux-saga、Dva、MobX
https://www.jqhtml.com/23003.html 这篇文章试着聊明白这一堆看起来挺复杂的东西.在聊之前,大家要始终记得一句话:一切前端概念,都是纸老虎. 不管是Vue,还是 Reac ...
- React进阶篇(2) -- Redux
前言 如果还不知道为什么要使用Redux,说明你暂时还不需要它. 三大原则 单一数据源 整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一 ...
- Redux & React & react-redux
Redux Redux & React & react-redux https://redux.js.org/ https://redux.js.org/api https://red ...
- 谁都能听懂的Redux+Redux-Saga超级傻瓜教程
对不起本文确实有标题党的嫌疑:) 想要理解本文还是要先会用react和es6,如果连react和es6都不知道是什么的话我也没辙:( 如果你选择用react来开发应用,并且你没对各个组件的状态进行应有 ...
- react/redux组件库、模板、学习教程
开源的有蚂蚁金服的: 1.https://pro.ant.design/index-cn 2.https://pro.ant.design/docs/getting-started-cn 3.http ...
随机推荐
- linux command cp.
Examples cp file1.txt newdir Copies the file1.txt in the current directory to the newdir subdirector ...
- Objective-C学习篇04—多态
多态 多态的概念 有这样一个例子.早上我和同事说口渴了.结果:A同事拿着我的水杯去给我接了一杯水.B同事顺手在饮水机上拿了一次性纸杯给我接了杯水.C同事给了我一瓶他早上刚买的饮料.同事们得到的是同样的 ...
- Spring mvc 中有关 Shiro 1.2.3 配置问题
Spring 版本:3.2.x, 4.0.x [问题说明] 首先介绍下配置出错情况: (1)项目中,Spring3 and Spring4 的 applicationContext.xml aop ...
- Js 旋转平滑特效
效果图 源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- Ubuntu12.04安装java以及Eclipse和Tomcat
阔别已久的Java,现在捡起来偶感觉亚历山大啊,就单单一个环境的安装就搞得我焦头烂额啊.真后悔当初学习Java的时候没有记录下来这一门槛——环境的搭建,要知道学好一门语言,Develop Enviro ...
- nginx配置无效的问题
今天修改nginx的一个配置文件,却怎么都没效果,发现是启动nginx指定的配置文件不一样. #ps aux|grep nginx root 17672 0.0 0.0 45856 2 ...
- STL容器介绍
STL的容器可以分为以下几个大类: 一:序列容器, 有vector, list, deque, string. 二 : 关联容器, 有set, multiset, map, mulmap, h ...
- laravel观察者模式
laravel观察者模式: 事件
- WinPcap编程(前言&&学习)
计算机网络课设要求用WinPcap写对ARP包的接收与发送. 所以学了一下WinPcap的内容. 参考的博客: http://blog.csdn.net/htttw/article/details/7 ...
- D题(贪心)
D - D Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Descripti ...