javascript - 单个组件中的多个 redux 存储

Question

我已经进入了使用多个 redux 存储的 react 项目。

有很多种界面:选项卡、上下文、弹出窗口和其他。这个项目的架构师决定拆分这家商店，使这个项目更快。我不能改变架构，只能按照它的方式工作。

有时我会遇到组件需要订阅 3 个商店的情况。这是非常痛苦的，因为首先来自提供者，其次来自 props 组件

        const { someProps } = this.props;

        return (
                <Provider store={SomeStore}>
                    <Route  <Component props={someProps} />
                </Provider>
        )

第三个来自 State = { store.subsribe }。

this.state = Store.getState();
Store.subscribe(() => this.setState(Store.getState()));

是否有可能将多个商店合并为一个样式的组件？

Answer 1

您可以创建某种 Facade 或 Proxy - 基本上是 HOC，它将封装所有更改并响应 Prop 、商店或其他地方的更改。

我认为你可以使它类似于 Redux store，其中主对象具有表示不同数据源/状态的属性，这些属性由不同的 reducer 创建。

在你的 Component 中你可以通过

1. Prop 更换
2. Provider 更新提供的状态
3. 对 react 性数据源变化使用react

如果你在某个孤立的区域工作——你可以用这个 HOC 包装它，并将所有数据源合并的所有数据作为 prop 传递下去，例如称为 store。