状态管理赋能组件通信：手撕发布订阅模式

前端

2023-10-04 12:04:57

导言

在现代前端开发中，组件通信是一个至关重要的课题。发布订阅模式是一种轻量且高效的通信方式，能够无缝连接不同的组件，共享数据和事件。传统的实现方式通常基于事件总线或全局状态存储，但它们往往存在耦合度高、维护复杂的问题。

本文将带你踏上一个代码实践之旅，探索如何利用状态管理库，例如 Redux 或 Zustand，实现一个自定义的发布订阅模式。这种方法不仅能解决传统方式的痛点，还能带来诸如模块化、可复用性等优势。

剖析发布订阅模式

发布订阅模式是一种异步通信模型，其核心思想是：

发布者 ：负责产生事件或消息，并将其广播给所有订阅者。
订阅者 ：感兴趣于接收特定事件或消息，并对其做出相应处理。

基于状态管理的实现

利用状态管理库实现发布订阅模式的关键在于：将事件或消息存储在全局状态中，并通过监听状态变化来触发订阅者的回调。具体步骤如下：

创建发布函数： 该函数接受事件类型和数据作为参数，并更新全局状态，将新事件添加到列表中。
创建订阅函数： 该函数接受事件类型和回调函数作为参数，并在状态变化时触发回调，前提是新事件类型与订阅的事件类型匹配。
在组件中使用： 在组件中，使用 useEffect 钩子监听状态变化，并在接收到新事件时调用订阅回调。

优势

这种基于状态管理的发布订阅模式具有以下优势：

模块化： 组件与事件处理逻辑分离，增强了代码的可维护性和可读性。
可复用性： 发布订阅钩子可以跨组件重用，简化了代码编写。
减少耦合： 组件之间通过状态管理库进行通信，避免了直接耦合，提高了系统的可扩展性。

代码示例

以下是一个使用 Redux 实现发布订阅模式的示例：

import { createSlice, createSelector } from "@reduxjs/toolkit";

const slice = createSlice({
  name: "pubsub",
  initialState: {
    events: [],
  },
  reducers: {
    publish: (state, action) => {
      state.events.push(action.payload);
    },
  },
});

export const { publish } = slice.actions;

export const useSubscribe = (eventType, callback) => {
  const events = useSelector(createSelector(
    (state) => state.pubsub.events,
    (events) => events.filter((e) => e.type === eventType)
  ));

  useEffect(() => {
    if (events.length > 0) {
      callback(events[events.length - 1]);
    }
  }, [events]);
};