react-native - 当 native 应用程序启动时，将初始状态从 API 调用传递到 createStore

Question

当我的 react-native 应用程序启动时，我无法初始化我的 redux-state。我需要在应用程序启动之前进行 api 调用以检索数据以保持状态。我想将此调用的结果传递给我的 Provider JSX 元素中的 createStore 函数。
我已经阅读了有关如何做到这一点的不同内容，但它们似乎都不起作用。

这是我的根 App 组件:

import React, { Component } from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import RouterComponent from './Router';

class App extends Component {
  render() {
    return (
      <Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
        <View style={{ flex: 1 }}>
          <RouterComponent />
        </View>
      </Provider>
    );
  }
}


export default App;

我已经阅读并尝试了不同的策略:
- 在 api 调用的 then 回调中包装了 render 方法的 return 语句
- 在 componentWillMount 或 componentDidMount 中进行调用

这些都不适合我。当 react-native 应用程序启动时，从 API 调用传递初始状态的标准方法是什么？

Answer 1

您不能(也不应该)延迟组件的安装，直到 API 调用返回(它甚至可能会失败)。

您可以在等待 API 调用返回时显示加载屏幕，方法是检查某个 Redux 状态(将由 API 结果填充)在您的组件中是否仍然为空(条件渲染)。

如果你想用你的API结果替换整个Redux状态，你需要写一个root reducer，看答案here .

要在应用程序启动时启动 API 调用并在成功时填充状态，您可以将以下内容添加到 Redux store 的任何位置。定义/导入:

fetch(...).then(result => store.dispatch(...))

您可以查看 persisting it with the client，而不是从服务器填充 Redux 状态。如果它适合您的用例。