Redux 基础速查表 📖
基础知识
基础知识
方案
所有组件的状态都存储在全局状态中。组件可以从中读取信息，但不能直接更改其中的内容。
为了更改全局状态，组件需要创建 Actions 对象并将其提交给 Redux Store。此类操作称为调度。Redux
Store 随后使用 Reducer 函数来更新状态。
减速器
这是一个用于存储逻辑的函数。接受state和action（简单对象）。
const reducer = (state = 0, action) => {
switch (action.type) {
case "INC":
return state + 1;
default:
return state;
}
};
let state = reducer(undefined, {});
state = reducer(state, { type: "INC" });
如果state是undefined，则需要返回原始initialState。
如果action类型未知，则需要返回state未更改的 。
Reducer 必须是纯函数！这意味着：
- 返回值仅取决于参数（只能使用参数）
- 该函数没有副作用（改变外部数据或改变参数）
Redux 商店
Redux Store 的作用是协调 React 应用程序中的数据。
import { createStore } from "redux";
const reducer = (state = 0, action) => {
switch (action.type) {
case "INC":
return state + 1;
default:
return state;
}
};
// Creating store (by default — 0)
const store = createStore(reducer);
// Subscriptions on changes in store
store.subscribe(() => [console.log(`store changed: ${store.getState()}`)]);
// Handling new actions
store.dispatch({ type: "INC" });
store.dispatch({ type: "INC" });
反例：
import { createStore } from "redux";
const reducer = (state = 0, action) => {
switch (action.type) {
case "INC":
return state + 1;
case "DEC":
return state - 1;
default:
return state;
}
};
const store = createStore(reducer);
const dec = document.getElementById("dec");
const inc = document.getElementById("inc");
dec.addEventListener("click", () => store.dispatch({ type: "DEC" }));
inc.addEventListener("click", () => store.dispatch({ type: "INC" }));
const update = () => {
const counter = document.getElementById("counter");
counter.textContent = store.getState();
};
store.subscribe(update);
除了通过操作减少操作的类型之外，您还可以传输其他信息来执行此操作：
import { createStore } from "redux";
const reducer = (state = 0, action) => {
const { type, payload } = action;
switch (type) {
case "INC":
return state + 1;
case "DEC":
return state - 1;
case "RND":
return state + payload;
default:
return state;
}
};
const store = createStore(reducer);
const dec = document.getElementById("dec");
const inc = document.getElementById("inc");
const rnd = document.getElementById("rnd");
dec.addEventListener("click", () => store.dispatch({ type: "DEC" }));
inc.addEventListener("click", () => store.dispatch({ type: "INC" }));
// ---
rnd.addEventListener("click", () => {
const payload = Math.floor(Math.random() * 10 + 1);
store.dispatch({ type: "RND", payload });
});
// ---
const update = () => {
const counter = document.getElementById("counter");
counter.textContent = store.getState();
};
store.subscribe(update);
简化代码：Action Creator 和 bindActionCreators
动作创造者
ActionCreator 是一个单独的函数，用于创建动作对象，从而可以轻松编写代码：
const inc = () => ({ type: "INC" });
const dec = () => ({ type: "DEC" });
const rnd = (payload) => ({ type: "RND", payload });
绑定动作创建者
bindActionCreator 绑定任何接受的 actionCreator 来调度：
const store = createStore(reducer);
const { dispatch } = store;
const incDispatch = () => dispatch(inc());
const decDispatch = () => dispatch(dec());
const rndDispatch = (payload) => dispatch(rnd(payload));
// bindActionCreator working like that
const bindActionCreator = (creator, dispatch) => (...args) => {
dispatch(creator(...args));
};
// Code is shorter now
const incDispatch = bindActionCreator(inc, dispatch);
const decDispatch = bindActionCreator(dec, dispatch);
const rndDispatch = bindActionCreator(rnd, dispatch);
Redux 有其自己的bindActionCreators功能：
import { createStore, bindActionCreators } from "redux";
const incDispatch = bindActionCreator(inc, dispatch);
const decDispatch = bindActionCreator(dec, dispatch);
const rndDispatch = bindActionCreator(rnd, dispatch);
与自写函数的区别在于，它bindActionCreators可以将一组动作的对象作为第一个参数：
const { incDispatch, decDispatch, rndDispatch } = bindActionCreators(
{
incDispatch: inc,
decDispatch: dec,
rndDispatch: rnd,
},
dispatch
);
此类对象的键就是我们想要接收的函数名。对于一组动作，bindActionCreators 返回一个包含可析构的现成函数的对象：
import { createStore, bindActionCreators } from "redux";
import reducer from "./reducer";
import * as actions from "./actions"; // Import all actions in object format
const update = () => {
const counter = document.getElementById("counter");
counter.textContent = store.getState();
};
const store = createStore(reducer);
const { dispatch } = store;
const { inc, dec, rnd } = bindActionCreators(actions, dispatch);
store.subscribe(update);
document.getElementById("inc").addEventListener("click", inc);
document.getElementById("dec").addEventListener("click", dec);
document.getElementById("rnd").addEventListener("click", () => {
const payload = Math.floor(Math.random() * 10);
rnd(payload);
});
感谢阅读！❤️
你也可以看看我的JavaScript 基本类型转换速查表。
如果你有什么想补充的，请在评论区留言👇🏻