Async render ReactJS?

Question

I have defined a method to load data from 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;
  }
};

Now I would like to persist the state returned into my redux as below

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>
    );
  }
}

As above, persistedState will be a Promise returned by loadFromAsyncStorage() and the value can only be accessed if I chain .then() or adding a keyword await in front of loadFromAsyncStorage() method. I'm not sure how to achieve it in a render method as I can't make the render method async

Are you sure you want to `createStore` inside the `render` method? It should be outside. — Hardik Modha, Sep 11 '18 at 05:51
Is this helpful? https://stackoverflow.com/questions/27192621/reactjs-async-rendering-of-components — Hardik Modha, Sep 11 '18 at 05:51
I think that, you can dispatch inside of then and your createStore must be outside of render. — Araz Babayev, Sep 11 '18 at 05:58
@HardikModha: Do you mind to show me how moving the `createStore` out of render method can be working in my example? — Isaac, Sep 11 '18 at 06:07

score 0 · Answer 1 · answered Sep 11 '18 at 06:05

The easiest way to use redux-persist for this problem.

You simply need to create a separate store entry for all the app data, and redux-persist handle the persistence of those entries automatically to asyncStorage.

Full working example from Alexander Wolf is on this Codesandbox.

Async render ReactJS?

1 Answers1