redux

React

• use::观察者模式
• child::redux 异步处理
• child::Action
• child::Reduce

梗概

• React使用Redux时，redux的state更新会导致组件更新
• Redux通过Store存储状态、Action描述行为、Reducer处理状态变化，结合Redux Toolkit可简化操作，在组件中用useSelector取状态、dispatch触发Action来管理应用状态。

适用范围

• 缺点: 因为使用「单一存储」。这通常会「导致将所有的东西存储在一个大的单体存储中」。将UI和远程实体状态之间的所有东西都放在一个地方管理，这变得非常难以管理。对性能造成了不小的压力。
• 配置管理页面状态管理

示例

import { createStore } from 'redux';
 
// 初始状态
const initialState = {
    count: 0
};
 
// Reducer函数，用于更新状态
const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { ...state, count: state.count + 1 };
        case 'DECREMENT':
            return { ...state, count: state.count - 1 };
        default:
            return state;
    }
};
 
// 创建store
const store = createStore(counterReducer);
 
// 订阅store的变化
store.subscribe(() => {
    console.log(store.getState());
});
 
// 分发action，触发状态更新
store.dispatch({ type: 'INCREMENT' }); // { count: 1 }
store.dispatch({ type: 'DECREMENT' }); // { count: 0 }

结论

Redux是一个可预测的状态容器，帮助管理应用的状态。它通过单一存储来管理整个应用的状态，提供了一种清晰且可追踪的数据流。但是，当应用规模变大时，需要谨慎设计和使用Redux来避免性能问题和复杂度上升。