Question

我有一个需要从API获得一些数据的组件。我们称其为 A组件。最初，我将在安装时直接从此组件进行API调用，然后将获取的数据存储在组件的状态中。

现在，我的应用程序的另一部分需要相同的数据-我们将其称为组件B 。我已经决定将这些数据保持在应用程序的全局状态是有意义的，以便这两个组件都可以访问它。这样做的好处之一是，在我的应用程序加载时，数据可以被提取一次，然后在每个组件安装时无需进行额外的API调用即可重新使用。

我认为我可以通过以下两种方式之一进行操作：

选项1）我可以创建一个包装应用程序的组件，并负责进行API调用，从而在挂载时充实我的全局状态。看起来像这样（InitialAPICalls）：

const App = () => (
  <Provider store={store}>
    <Router history={history}>
      <InitialAPICalls>
        <Layout />
      </InitialDataProvider>
    </Router>
  </Provider>
);

然后InitialAPICalls可能包含如下内容，这些是通过mapDispatchToProps作为道具提供的动作：

componentDidMount() {
  this.props.fetchFooResources();
  this.props.fetchBarResources();
}

选项2）创建App组件后，我可以创建一个函数，直接使用商店调度所有必需的操作。会这样：

const App = () => (
  <Provider store={store}>
    <Router history={history}>
      <Layout />
    </Router>
  </Provider>
);

const dispatchInitialActions = () => {
  store.dispatch(fetchFooResources());
  store.dispatch(fetchBarResources());
};

dispatchInitialActions();

ReactDOM.render(<App />, document.getElementById('root'));

请注意，此应用程序具有Django后端，SSR不是我的选择。

Answer 1

一种常见的方法是在App.js中进行此api调用（使用具有[]依赖关系的钩子或老式风格的componentDidMount），使用redux-thunk或saga调用异步动作，填充商店。

然后有条件地渲染需要此信息的组件。

检查useSelector和useDispatch来做到这一点，它比mapDispatchToProps和mapStateToProps干净得多。真正改变游戏规则的人。

Answer 2

如果应用程序中始终需要状态，那么我通常将其放置在创建商店的文件中，因为您可以访问那里的商店，并且该文件位于您已初始化Redux状态的位置

话虽如此，您的两个选项中的任何一个也可以正常工作。由于选项2在选项1之前发生，因此提取开始需要花费一些时间。使用选项2和选项1不会节省太多时间。

使用选项1，如果您使用的是最新版本的react，则可以使用带有空依赖项数组的useEffect在App中进行抓取。

请注意，如果在组件渲染之前（本质上是在ReactDOM.render()调用之前）开始抓取操作，那么您就需要花一点时间进行初始渲染，以使抓取操作花费很少的时间。在需要它们之前取得进步。本质上，这是根据您要查看的内容进行的权衡。

初始化Redux存储后立即在哪里调度操作

2 个答案: