Question

我已经定义了一种从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将是Promise返回的loadFromAsyncStorage()，并且只有在我链接.then()或添加关键字await时才能访问该值在loadFromAsyncStorage()方法前面。我不确定如何在render方法中实现它，因为我无法使render方法异步

Answer 1

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

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

Alexander Wolf上的完整示例来自Codesandbox。

异步渲染ReactJS？

1 个答案: