Асинхронный рендер ReactJS? - PullRequest
Новая
       26

Асинхронный рендер ReactJS?

0 голосов
/ 11 сентября 2018

Я определил метод для загрузки данных из 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;
  }
};

Теперь я хотел бы сохранить состояние, возвращаемое в мой редукс, как показано ниже 

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 async

1 Ответ

0 голосов
/ 11 сентября 2018

Самый простой способ использовать redux-persist для этой проблемы.

Вам просто нужно создать отдельную запись в хранилище для всех данных приложения, а redux-persist обрабатывать постоянствоэти записи автоматически передаются в asyncStorage.

Полный рабочий пример из Александр Вольф находится на этом Codesandbox .

...