React 与 Redux：无 Redux 时数据流难题的终结

2023-10-14 16:42:03

React + Redux：解决无 Redux 时遇到的数据流问题

导言

React，作为 JavaScript 界炙手可热的库，凭借其声明式编程范式和高效渲染机制，已成为构建交互式 UI 的首选。然而，在复杂的应用程序中，管理组件之间的通信和状态往往会成为棘手的问题。

无 Redux 的困境

在没有 Redux 等状态管理库的情况下，React 组件通信的数据流是单向的，这意味着顶层组件可以通过 props 属性向下层传递数据，而下层组件无法向上层组件传递数据。要实现下层组件修改顶层组件状态的功能，需要进行繁琐的父子组件间回调传递，导致代码可读性和可维护性急剧下降。

Redux 的登场

Redux 是一个流行的状态管理库，通过引入一个中心化的全局状态树解决了无 Redux 时遇到的数据流问题。组件可以从全局状态树中获取所需的数据，并通过派发动作来修改状态，从而实现组件之间的数据交互。

核心概念

Store： 充当应用状态的单一来源。
Actions： 不可变的对象，用于需要进行的状态更改。
Reducers： 纯函数，接收当前状态和一个动作，并返回一个新的状态。

优势

单一数据源： 消除了组件之间数据传递的复杂性，避免了数据不一致的问题。
可预测的状态管理： Reducers 的纯函数性质确保了状态更新的可预测性和可调试性。
可扩展性： Redux 模块化的设计使其易于与其他库或扩展集成。

使用 Redux 的实际示例

在下面的代码示例中，我们使用 Redux 管理一个简单的计数器应用程序：

const store = createStore(reducer, { count: 0 });

const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  const increment = () => dispatch({ type: "INCREMENT" });
  const decrement = () => dispatch({ type: "DECREMENT" });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};