Как правильно использовать async/await в связке react-redux?

Question

[Vanya Huk]

Для примера есть компонента

class A {

constructor( props ){
  this.props.getItems();
}

render(){
  return( true )
}
}

getItems являеться action и делает запрос на сервер

export const getItems = () => {

	return async dispatch => {

		function onSuccess(success) {

			dispatch({ type: UPDATE_AJAX_PARAMS, payload:  success.data});
		}
		function onError(error) {

			dispatch({ type: UPDATE_AJAX_PARAMS, error });
	
		}
		
          try {
			const success = await axios.post( 'http://....');

			return onSuccess(success);

		} catch (error) {

			return onError(error);
		}

	}

соответственно мне нужно подождать пока вернется ответ от сервера и обновит Store после чего уже отрисовать компоненту

Comments

[Sergey Epifanov]

так и не понял, в чем вопрос-то? как отрендерить компонент только после загрузки данных?

[Vanya Huk]

Sergey Epifanov, да

Answer 1

[Афанасий Захаров]

Можно и без redux-thunk.
Просто создаете middleware

const someMiddleware = store => next => action => {
  if(action.type === 'Нужный_вам_экшн'){
     loadData(store.dispatch);
  }
}

где loadData - асинхронная функция

const  loadData = async(dispatch) =>{
  const resultData = await fetchDataFromServer();
  dispatch(actions.saveData(resultData));
}

Внутри компонента Вы, соответственно, вызываете экшн "Нужный_вам_экшн", его отловит someMiddleware, вызовет функцию loadData, которая собственно и сделает запрос к серверу.

Answer 2

[Sergey Epifanov]

добавьте в стор поле (например, isLoading), которое отвечает за статус загрузки. Перед выполнением запроса устанавливайте его в true, после завершения - в false. В компоненте проверяйте значение этого поля и рендерите компонент только когда isLoading установлено в false

Answer 3

[real2210]

Я думаю стоит использовать промисы.

В своем проекты я делаю что то вроде такого:

export const getItems= () => {
  return async dispatch => {
    await axios.get(baseUrl + '/items', {
      params: {
        token:  someToken
      }
    })
      .then(res => {
         dispatch({type: 'GET_ITEM', data: res.data})           
         dispatch({ type: 'FETCH_SUCCESS' });

      })
      .catch(error => {
        dispatch({ type: 'FETCH_FAILED', message: error });
      });
  }
}

Comments

[Roman K]

await мешать с then — это кощунство