如何在无公共根组件的独立React组件间共享同一Redux Store

我正在尝试搭建可被多组件访问的Redux Store，清楚常规方式是用Provider包裹根组件来全局共享Store上下文。但我维护的遗留系统中只有彼此独立的组件树，不存在全局公共根组件。

我需要让头部迷你购物车（MiniCart.tsx）与其他页面组件（如PageThatNeedsToAddToMiniCart.tsx）共享同一Store，目前两者虽导入了同一个store文件，但实际操作的是不同的Store实例，导致MiniCart无法响应其他组件的dispatch操作。

排查后确认：尽管只配置了一次Store，但由于组件分别打包，生成了多个Store实例。当前已用简易方案临时解决，后续计划采用redux-micro-frontend方案。

相关代码 #

hooks.ts #

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'

type DispatchFunc = () => AppDispatch
const useAppDispatch: DispatchFunc = useDispatch
const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

export { useAppDispatch, useAppSelector }

miniCartSlice.tsx #

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import type { RootState } from './store';

interface MiniCart {
    SubTotal: number;
}

interface MiniCartState {
    SubTotal: number;
}

// 注：原代码中initialState的类型UserCart应为MiniCart，已修正
const initialState: MiniCart = {
    SubTotal: 0,
}

const miniCartSlice = createSlice({
    name: 'miniCart',
    initialState: initialState,
    reducers: {
        productAdded: (state, action: PayloadAction<MiniCart>) => {
            return state = action.payload;
        }
    }
});

const selectSubTotal = (state: RootState) => state.miniCart.SubTotal;

export const { productAdded } = miniCartSlice.actions;
export { selectSubTotal };
export default miniCartSlice.reducer;

store.tsx #

import { configureStore } from '@reduxjs/toolkit';
import miniCartReducer from './miniCartSlice';

const store = configureStore({
    reducer: {
        miniCart: miniCartReducer
    }
})

type RootState = ReturnType<typeof store.getState>;
type AppDispatch = typeof store.dispatch;

export type { RootState, AppDispatch }
export default store;

PageThatNeedsToAddToMiniCart.tsx #

const dispatch = useAppDispatch();
...

dispatch(
    productAdded(result.UpdatedCart)
);

MiniCart.tsx #

// 当其他组件dispatch "productAdded"时，这个值不会更新，我预期会触发重渲染
const subTotal = useAppSelector(selectSubTotal); 
...
return (
    <div> 
        <p>{`Subtotal: ${subTotal} `}</p>
    </div>
);

内容的提问来源于stack exchange，提问作者Elliot Starks