状态管理库原理与实现（Redux/Vuex）

状态管理库（Redux/Vuex）的核心原理是通过集中管理应用状态，确保状态变化可预测、可追踪，并解决大型项目中组件间通信混乱的问题。其实现围绕单一状态树、状态只读与纯函数更新、响应式更新机制及中间件扩展能力展开，Redux与Vuex的设计思想高度相似，但具体实现因框架特性而异。

• Redux：通过createStore创建唯一store，所有状态存储在一个对象树中，通过store.getState()获取当前状态。
• Vuex：通过new Vuex.Store()创建store，状态直接挂载在store实例上，同样采用单一对象树结构。
• 意义：集中存储使状态变化可追踪，便于开发工具（如Redux DevTools）进行状态快照、回放和调试，避免分散状态导致的逻辑混乱。

• Redux：

  Action：普通对象，必须包含type字段，描述“发生了什么”（如{ type: 'ADD_TODO', text: 'Learn Redux' }）。

  Reducer：纯函数，接收旧状态和action，返回新状态（不修改原状态）。通过combineReducers组合多个reducer，管理不同模块状态。

  示例：function todoReducer(state = [], action) { switch (action.type) { case 'ADD_TODO': return [...state, { text: action.text }]; // 返回新数组 default: return state; }}

• Vuex：

  Mutation：唯一能修改状态的地方，必须是同步函数，通过commit提交（如store.commit('addTodo', { text: 'Learn Vuex' })）。

  Action：处理异步逻辑（如API调用），完成后提交mutation（如dispatch('fetchData')）。

  示例：const store = new Vuex.Store({ state: { todos: [] }, mutations: { addTodo(state, payload) { state.todos.push(payload); // 直接修改state（Vue响应式自动处理） } }, actions: { async fetchData({ commit }) { const data = await api.getData(); commit('setData', data); } }});

• Vuex：依赖Vue的响应式系统。store中的state本质是Vue实例的data，状态变化时，依赖它的组件自动重新渲染。
• Redux：本身无响应式能力，需结合React手动监听。通常使用react-redux的Provider和connect/useSelector订阅store变化，触发组件重新渲染。

  示例（React）：function TodoList() { const todos = useSelector(state => state.todos); return <div>{todos.map(todo => <div key={todo.id}>{todo.text}</div>)}</div>;}

• Redux：通过applyMiddleware注入中间件，增强dispatch能力。

  常用中间件：

  redux-thunk：支持异步action（如返回函数的action）。

  redux-logger：打印状态变化日志。

  示例：const store = createStore(rootReducer, applyMiddleware(thunk, logger));

• Vuex：通过插件机制扩展功能，监听mutation实现日志、持久化等。

  示例：const loggerPlugin = store => { store.subscribe((mutation, state) => { console.log(`Mutation type: ${mutation.type}, new state:`, state); });};const store = new Vuex.Store({ plugins: [loggerPlugin] });

• 共同点：

  单一数据源：所有状态集中存储。

  状态只读：必须通过action/mutation修改。

  纯函数更新：reducer/mutation无副作用。

• 差异：

  更新机制：Vuex依赖Vue响应式，Redux需手动订阅。

  异步处理：Vuex中action处理异步后提交mutation，Redux通过中间件（如redux-thunk）处理异步action。

1. 维护全局对象：存储状态（如const state = { todos: [] }）。
2. 暴露接口：

   getState()：返回当前状态。

   dispatch(action)：调用reducer生成新状态。

   subscribe(listener)：注册状态变化回调。

3. 示例代码：function createStore(reducer) { let state; const listeners = []; function getState() { return state; } function dispatch(action) { state = reducer(state, action); listeners.forEach(listener => listener()); } function subscribe(listener) { listeners.push(listener); return () => listeners.splice(listeners.indexOf(listener), 1); } dispatch({ type: '@@INIT' }); // 初始化状态 return { getState, dispatch, subscribe };}

总结：Redux与Vuex通过单一状态树、纯函数更新和中间件机制，实现了可预测的状态管理。理解其核心后，可灵活应用于不同框架或自定义简易版Store，关键在于保持状态变更的透明性和可控性。