纯HTML模板中用Redux需手动绑定DOM与store：初始化store、监听状态变化、每次变化后重写对应DOM节点；避免dispatch后不调render、innerHTML漏清空旧内容；reducer需兜底处理undefined initialState；subscribe须传函数而非执行结果；render中优先用textContent防XSS，插HTML时先清空再赋值；Web Component通过属性/事件桥接Redux，禁用组件库JS行为仅用其CSS和结构；调试依赖console日志与action meta标记。
纯HTML模板里怎么用Redux管理状态
不能直接套React那一套，得手动绑定DOM和store。核心是三件事：初始化store、监听状态变化、每次变化后重写对应DOM节点。
常见错误是dispatch完没调render，或者render里直接改innerHTML却漏了清空旧内容，导致重复追加。
-
createStore必须传reducer和initialState，缺一不可；不传preloadedState时，reducer第一个参数是undefined，得自己兜底 - 订阅要用
store.subscribe(() => render())，别写成store.subscribe(render)——后者会立即执行一次，且无法控制执行时机 -
render()函数里优先用textContent更新文本，避免XSS；要插HTML结构时，先清空容器再innerHTML = templateString - 别在reducer里操作DOM，所有视图更新只发生在
render()里，否则状态和界面就不同步了
Web Component + Redux 怎么通信
Custom Element本身不感知Redux，得靠属性/事件桥接。组件内部不存state，只读取父级传入的props，再通过dispatch发action。
容易踩的坑是把store实例直接挂到this.store上——多个组件实例会共享同一个引用，但connectedCallback可能被多次触发，造成重复订阅。
立即学习“前端免费学习笔记（深入）”；
- 在
attributeChangedCallback里响应属性变更，比如count变了就触发dispatch({ type: 'SET_COUNT', payload: newValue }) - 组件内部用
dispatch发action，别直接改store.state；外部store变化后，由父容器（或全局render）统一刷新该组件 - 如果组件需要独立状态（比如开关展开/收起），用
this._localState = { expanded: false }，和Redux state分开管 - Shadow DOM里监听事件仍用
this.shadowRoot.addEventListener，别漏掉useCapture: true处理冒泡前的交互
CDN引入的组件库能和Redux一起用吗
能，但得避开两处硬伤：一是组件库自带状态（如Bootstrap Modal的show/hide），二是它内部DOM操作会绕过你的render流程。
典型现象是点击按钮dispatch了action，count变了，但Modal还是开着——因为Bootstrap JS自己维护了data-bs-show，没监听Redux。
- 禁用组件库的JS行为，只用它的CSS类名和HTML结构，比如用
<button class="btn btn-primary">但不用data-bs-toggle - 用Redux action代替原生事件：把
bootstrap.bundle.min.js删掉，自己写document.getElementById('modal-btn').addEventListener('click', () => store.dispatch({ type: 'OPEN_MODAL' })) - Modal显隐状态存在Redux里，
render()根据state.modalOpen决定是否给<div class="modal">加show类，而不是靠bootstrap.show() - 表单控件如
<input type="range">要同步value到state，得监听input事件，不是change——拖动过程也要实时更新
为什么HTML模板里用状态管理反而更难调试
因为没有框架的devtools支持，所有状态变更都变成黑盒：你不知道action从哪来、reducer在哪返回了什么、render到底执行了几次。
最常被忽略的是reducer返回了引用相同的对象，导致store.subscribe根本没触发——Redux靠===判断变化，浅拷贝都不行。
- 强制用
JSON.parse(JSON.stringify(state))做深拷贝太重，改用{ ...state, count: state.count + 1 }或structuredClone(state)（注意兼容性） - 在reducer开头加
console.log('reducer in:', action, 'old state:', state)，结尾加console.log('reducer out:', newState)，比猜强十倍 - 给每个action加
meta字段标记来源，比如{ type: 'FETCH_DATA_SUCCESS', meta: { from: 'user-list-page' } }，方便定位问题模块 - 别把所有state塞进一个大对象，按功能拆成
ui: { modalOpen: false }, data: { users: [] }，否则一个字段错，整个render瘫痪
