如何在没有 Redux 的情况下处理应用程序状态？

Redux 是一个流行的状态管理库，尤其在 React 应用程序中被广泛使用。但是，有时候你可能不想使用 Redux 或者你正在使用其他框架，那么如何在没有 Redux 的情况下处理应用程序状态呢？下面有几种方法供你选择。

React 状态提升

React 允许你将状态从子组件提升到父组件中，这样可以避免使用 Redux 来处理全局状态。这种方式适用于简单的应用程序，但对于复杂的应用程序可能会变得冗长和混乱。

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleAdd = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent count={count} onAdd={handleAdd} />
    </div>
  );
}

function ChildComponent({ count, onAdd }) {
  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={onAdd}>Add</button>
    </div>
  );
}

Context API

React Context API 允许你将状态向下传递，并在应用程序中共享。这种方式适合中小型应用程序，但大型应用程序可能会更加复杂。

const CounterContext = createContext();

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);

  const handleAdd = () => {
    setCount(count + 1);
  };

  return (
    <CounterContext.Provider value={{ count, handleAdd }}>
      {children}
    </CounterContext.Provider>
  );
}

function ChildComponent() {
  const { count, handleAdd } = useContext(CounterContext);

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={handleAdd}>Add</button>
    </div>
  );
}

Pub/Sub 模式

发布/订阅模式是一种模式，其中订阅者向发布者订阅事件。当发布者触发事件时，订阅者将收到通知。这可以用于在应用程序中处理状态。

const events = {};

function subscribe(eventName, callback) {
  if (!events[eventName]) {
    events[eventName] = [];
  }
  events[eventName].push(callback); // 订阅事件
}

function unsubscribe(eventName, callback) {
  if (!events[eventName]) {
    return;
  }
  events[eventName] = events[eventName].filter(
    (cb) => cb !== callback
  ); // 取消订阅事件
}

function publish(eventName, payload) {
  if (!events[eventName]) {
    return;
  }
  events[eventName].forEach((cb) => cb(payload)); // 发布事件
}

// usage
subscribe("counter:add", (count) => {
  console.log("Counter add:", count);
});

publish("counter:add", 1); // Counter add: 1

MobX

MobX 是一个状态管理库，可以用于管理应用程序中的状态。它使用响应式编程将状态与应用程序的其他部分连接起来。

import { observable, action } from "mobx";

class CounterStore {
  @observable count = 0;

  @action
  increment() {
    this.count += 1;
  }
}

const counterStore = new CounterStore();

function ChildComponent() {
  const handleAdd = () => {
    counterStore.increment();
  };

  return (
    <div>
      <div>Count: {counterStore.count}</div>
      <button onClick={handleAdd}>Add</button>
    </div>
  );
}

结论

以上是一些不使用 Redux 的方式来处理应用程序状态的例子，其中每种方法都有其优缺点，具体使用的方式可以根据你的应用程序需求和情况做决定。如果你的应用程序比较复杂，Redux 仍然是最佳的选择。