[Redux] Introduction
2024-08-24 21:52:25
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;
}
}
最新文章
- Base64 的那些事儿
- Firefox 23中的新特性（新陷阱）
- 台式电脑部署xen虚拟化的各种问题
- libeXosip2(2-2) -- eXosip2 network API
- C#中反射的概念及其使用（转）
- SQL Server存储过程同时返回分页结果集和总数
- 分布式版本控制系统Git-----4.Git 常用命令整理
- aspcms多图调用以及错误提示:3704
- Centos安装配置Tomcat,并部署web应用
- day 42 mysql 数据类型
- django面试六
- Mongodb Windows 集群
- Tips for Navigating Large Game Code Bases
- Beand的高级特征
- mysql-connector-java升级到6.0以后启动tomcat报错
- 测试工具-PICT-微软基于数据项多个取值的正交法用例生成工具
- python 获取当前目录，上级目录，上上级目录
- MySQL-事务特性
- Linux系统下Shell命令行快捷键实用技巧
- leetcode836