如何优雅地解决多个 React、Vue App 之间的状态共享

const store = currentEmitter.store

ee.on(ACTION.ADD_COUNT, store.count.addCount, store.count)

return window.myEmitter

}

这样一个非常原始的状态共享方式就完成啦，接下来我们就看看在 React 中是如何使用的吧

import React,{ useState, useEffect} from ‘react’

import {getMyEmitter, ACTION} from ‘./getMyEmitter’

// 使用

const emitter = getMyEmitter()

const CountDemo = ()=>{

return

{emitter.store.count.value}

}

// 触发事件

const ButtonDemo = ()=>{

return <button onClick={()=>{emitter.emit(ACTION.ADD_COUNT)}}>add count

}

优点

这样的解决方案比较原始，但是的确可以解决我们的面临的问题：

• 解决多入口打包应用无法使用统一数据源问题，统一维护管理多应用数据状态

• 单一数据源

缺点

但是缺点也非常的明显：

• 数据暴露在全局 window 对象，不优雅、不安全

• 使用事件触发的方式来同步数据好像不是 React 推荐做法

• 一旦需要注册的事件变多，将难以管理事件和状态

二、单入口打包 + 传送门

React 推荐做法

在方案一中我们说了，使用事件触发的方式同步数据不是 React 推荐做法，那数据共享的推荐做法是什么呢？React 的推荐做法是 提升状态 到各个组件最近的父级节点，借助 React 官方文档 useContext demo 来简单理解：

// 需要共享的数据

import ReactDOM from “react-dom”;

import React, { createContext, useContext, useReducer } from “react”;

import “./styles.css”;

const ThemeContext = createContext();

const DEFAULT_STATE = {

theme: “light”

};

const reducer = (state, actions) => {

switch (actions.type) {

case “theme”:

return { …state, theme: actions.payload };

default:

return DEFAULT_STATE;

}

};

<