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

Question

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

现在，我的应用程序的另一部分需要相同的数据-我们称它为[[Component 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

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

检查useSelector和useDispatch进行此操作，比mapDispatchToProps和mapStateToProps干净得多。真正改变游戏规则的人。

Answer 2

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

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