十九、Hello Redux
大约 1 分钟约 336 字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Redux</title>
<script src="https://unpkg.com/redux@4.2.0/dist/redux.js"></script>
</head>
<body>
<div>
<button id="sub">减少</button>
<span id="countSpan">1</span>
<button id="add">增加</button>
<button id="addFive">增加5</button>
</div>
</body>
</html>
（一） 手动绑定值
const subBtn = document.getElementById("sub");
const addBtn = document.getElementById("add");
const countSpan = document.getElementById("countSpan");
let count = 1;
subBtn.addEventListener("click", () => {
count--;
countSpan.innerText = count;
});
addBtn.addEventListener("click", () => {
count++;
countSpan.innerText = count;
});
（二） 网页中使用 redux
1.步骤
- 引入
redux核心包 - 创建
reducer整合函数 - 通过
reducer对象创建store - 对
store中的state进行订阅 - 通过
dispatch派发state的操作指令
2.state 表示当前的 state
- 可以根据这个
state生成新的state - 必须指定初始值（也可以在
createStore调用时作为第二个参数传递）
3.action 是一个 js 对象，保存操作的信息
type表示操作的类型- 其他需要传递的参数，也可以在
action中设置
const subBtn = document.getElementById("sub");
const addBtn = document.getElementById("add");
const addFiveBtn = document.getElementById("addFive");
const countSpan = document.getElementById("countSpan");
function reducer(state = { count: 1 }, action) {
switch (action.type) {
case "ADD":
return { ...state, count: state.count + 1 };
case "SUB":
return { ...state, count: state.count - 1 };
case "ADD_N":
return { ...state, count: state.count + action.payload };
default:
return state;
}
}
const store = Redux.createStore(reducer);
store.subscribe(() => {
countSpan.innerText = store.getState().count;
});
let count = 1;
subBtn.addEventListener("click", () => {
store.dispatch({ type: "SUB" });
});
addBtn.addEventListener("click", () => {
store.dispatch({ type: "ADD" });
});
addFiveBtn.addEventListener("click", () => {
store.dispatch({ type: "ADD_N", payload: 5 });
});