shared-zustand：跨标签状态共享的解决方案

shared-zustand：跨标签状态共享的解决方案

shared-zustand cross-tab state sharing for zustand 项目地址: https://gitcode.com/gh_mirrors/sh/shared-zustand

项目介绍

shared-zustand 是一个轻量级的开源项目，旨在为 React 应用程序提供跨标签页状态同步的功能。基于流行的状态管理库 zustand，shared-zustand 通过仅需1.5kB的代码即可实现跨标签的状态共享，确保了在单用户系统中的稳定性和可靠性。

项目技术分析

shared-zustand 利用 Web API 中的 BroadcastChannel 实现状态同步。当主标签页（写者）状态发生变化时，通过广播通道将变化通知到其他标签页（读者），实现状态的实时更新。这种机制确保了即使在多个标签页同时打开的情况下，用户也能获得最新的状态。

项目的主要技术特点包括：

• 兼容性：shared-zustand 使用 BroadcastChannel 进行状态同步，这是一种广泛支持的浏览器 API。
• 渐进增强：shared-zustand 通过检查 BroadcastChannel 是否存在于全局对象中来实现渐进增强，确保在不支持的环境中仍然可以正常运行。
• 轻量级：项目大小仅为1.5kB，对页面性能的影响微乎其微。

项目及技术应用场景

shared-zustand 适用于多种需要跨标签页同步状态的应用场景，例如：

• 多标签浏览：用户在多个标签页同时操作时，确保每个标签页的状态保持一致。
• 单用户系统：在单用户系统中，使用户在不同标签页之间的操作无缝衔接。
• 协同编辑：在协同编辑场景中，多个用户在不同标签页上对文档进行编辑，shared-zustand 可以确保所有用户都能实时看到最新的文档状态。

项目特点

以下是 shared-zustand 的主要特点：

1. 可靠性：shared-zustand 在多个标签页之间共享状态时表现出色，即使在主标签页频繁切换的情况下也能保持状态的稳定。
2. 即插即用：shared-zustand 提供了简单易用的 API，开发者可以快速集成到现有项目中，无需复杂的配置。
3. 灵活配置：开发者可以根据需要自定义状态同步的行为，例如是否立即从其他标签页恢复状态、定义广播通道的名称、以及序列化复杂对象的函数。
4. JSON序列化：shared-zustand 限制共享的对象必须是 JSON 可序列化的，这保证了数据的兼容性和传输的稳定性。

安装和使用

安装 shared-zustand 非常简单，可以使用 npm 或 yarn：

npm install shared-zustand

或者

yarn add shared-zustand

在项目中使用 shared-zustand 时，首先需要创建一个 zustand 存储，然后通过 share 函数共享状态：

import { createStore } from "zustand";
import { subscribeWithSelector } from "zustand/middleware";
import { share, isSupported } from "shared-zustand";

const useStore = createStore(subscribeWithSelector((set) => ({ count: 1 })));

if ("BroadcastChannel" in globalThis /* || isSupported() */) {
    share("count", useStore);
}

// ...

useStore.setState((count) => ({ count: count + 1 }));

shared-zustand 的 API 设计简洁，易于理解，使得开发者可以快速掌握并应用。

总结

shared-zustand 是一款功能强大的跨标签页状态同步解决方案，适用于多种复杂的应用场景。其可靠性和易用性使其成为开发者的首选工具。如果你正在寻找一种简单而高效的方式来同步不同标签页之间的状态，shared-zustand 可能正是你所需要的。

shared-zustand cross-tab state sharing for zustand 项目地址: https://gitcode.com/gh_mirrors/sh/shared-zustand