异步渲染 ReactJS？答案

【问题标题】：Async render ReactJS?异步渲染 ReactJS？
【发布时间】：2019-02-15 13:43:40
【问题描述】：

我已经定义了一个从AsyncStorage加载数据的方法

const loadFromAsyncStorage = async () => {
  try {
    const serializedState = await AsyncStorage.getItem('state');
    if (serializedState === null) return undefined;

    return JSON.parse(serializedState);
  } catch (error) {
    // Error retrieving data
    console.log(error.message);
    return undefined;
  }
};

现在我想将状态返回到我的 redux 中，如下所示

export default class App extends Component {
  render() {
    const persistedState = loadFromAsyncStorage();

    persistedState.then(x => {
      // ??
    });

    const store = createStore(
      reducers, 
      persistedState, 
      applyMiddleware(ReduxThunk)
    );

    store.subscribe(() => saveToAsyncStorage(store.getState()));

    return (
      <Provider store={store}>
        <MainNavigator />
      </Provider>
    );
  }
}

如上，persistedState 将是由loadFromAsyncStorage() 返回的Promise，并且只有在我链接.then() 或在loadFromAsyncStorage() 方法前面添加关键字await 时才能访问该值。我不确定如何在渲染方法中实现它，因为我无法使 render 方法异步

【问题讨论】：

您确定要在render 方法中使用createStore 吗？它应该在外面。
这有用吗？ stackoverflow.com/questions/27192621/…
我认为，您可以在 then 内部调度，并且您的 createStore 必须在 render 之外。
@HardikModha：您介意告诉我在我的示例中如何将createStore 移出渲染方法吗？

标签： reactjs react-native redux promise asyncstorage

【解决方案1】：

使用redux-persist 解决此问题的最简单方法。

您只需为所有应用数据创建一个单独的存储条目，redux-persist 会自动将这些条目的持久性处理到 asyncStorage。

Alexander Wolf 的完整工作示例在此 Codesandbox 上。

【讨论】：