闭包可模拟Redux核心机制:状态私有化、纯函数更新、订阅通知。通过闭包封装state与reducer,暴露getState、dispatch、subscribe接口,实现单一数据源与显式更新,但无中间件、异步支持及完整订阅管理。

可以用闭包模拟 Redux 的核心机制:状态私有化、纯函数更新、订阅通知。关键不是复刻全部 API,而是理解其思想并用闭包封装状态与逻辑。
1. 用闭包封装 store 和状态
把 state 存在闭包内,外部无法直接修改,只能通过约定的方法操作:
function createSimpleStore(initialState) {
let state = initialState;
<p>function getState() {
return JSON.parse(JSON.stringify(state)); // 浅拷贝防止外部篡改
}</p><p>function dispatch(action) {
state = reducer(state, action);
}</p><p>function subscribe(listener) {
// 简单实现:每次 dispatch 后调用一次(不支持取消订阅)
const oldDispatch = dispatch;
dispatch = function (action) {
oldDispatch(action);
listener();
};
}</p><p>return { getState, dispatch, subscribe };
}2. 实现一个纯函数 reducer
reducer 必须是纯函数,不修改原 state,只返回新对象:
function reducer(state, action) {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
case 'SET_NAME':
return { ...state, name: action.payload };
default:
return state;
}
}3. 创建 store 并使用
调用工厂函数生成独立 store 实例,每个实例都有自己的闭包状态:
立即学习“Java免费学习笔记(深入)”;
const store = createSimpleStore({ count: 0, name: 'Redux' });
<p>store.subscribe(() => {
console.log('State changed:', store.getState());
});</p><p>store.dispatch({ type: 'INCREMENT' }); // → State changed: { count: 1, name: 'Redux' }
store.dispatch({ type: 'SET_NAME', payload: 'JS' }); // → State changed: { count: 1, name: 'JS' }4. 注意事项和限制
这个简易版只体现闭包 + 单一数据源 + 显式更新的思想:
- 没有中间件支持,
dispatch是同步的 - 订阅机制极简,不返回取消函数,也不做去重或批量更新
- 状态深拷贝需自行处理(示例中仅浅拷贝,复杂嵌套要用
structuredClone或库) - 真正的 Redux 使用
Object.freeze和严格模式防误改,这里用 JSON 方式权衡可读性
闭包在这里的作用很清晰:把 state 和 reducer 逻辑封在内部,只暴露安全接口。它不是炫技,而是为不可变性与可控副作用打基础。


















