Question

我的技术主管给我带来了一个挑战，那就是设计一种方法，该方法只能只加载商店的一部分，而这是在单个页面应用程序中加载的UI所需的。这是一个大数据应用程序，因此这很重要。这个想法是因为数据量大，不需要加载整个存储。

Answer 1

我最近实现了类似的操作，发现How to dynamically load reducers for code splitting in a Redux application?带有指向http://nicolasgallagher.com/redux-modules-and-code-splitting/的链接，其中Nicolas在Twitter上描述了他们的工作方式。

TL; DR您需要为此延迟加载的减速器。那里描述的方法必须具有一个“ reducer-registry”类。需要使用减速机时，请注册它们。然后，注册表将调用包含组合的减速器（包含所有当前注册的减速器）的侦听器。您将侦听器附加到注册表上，该注册表会在商店上调用<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input type="text" id="Search" placeholder="placeholder text" autofocus> <div class="names">Joey</div> <div class="names">Alec</div> <div class="names">Mike</div> <div class="names">Fred</div> <div class="names">George</div> <div class="names">Anne</div> <div class="names">Cordelia</div> <div class="names">Jenny</div> <div class="names">Melanie</div>来更新其reducer。

我的实现在这里。https://github.com/lecstor/redux-helpers/blob/master/src/reducer-registry.ts

Answer 2

在mapStateToProps中，可以选择组件中所需的redux存储的键。

例如。

function mapStateToProps(state) {
  const { key1, key2 } = state;
  const {subKey, ...restKeys} = key1;

  return {
    remainder: ...restKeys,
    subKey,
    key2,
  };
}

现在可以使用this.props.remainder或this.props.subKey或this.props.key2在组件中访问此数据

如何在React应用程序中仅加载Redux存储的一部分

2 个答案: