Redux Thunk и Asyn c Действия - PullRequest
Новая
       62

Redux Thunk и Asyn c Действия

1 голос
/ 10 апреля 2020

Я получаю две суженные ошибки, связанные с действиями thunk и asyn c.

Первая - «Ошибка: действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных c действий. »

И второе:« Необработанное отклонение (TypeError): error.response не определено »

Ссылка на проект на github находится здесь: https://github.com/paalpwmd/react_front_to_back/tree/master/itlogger

Мое действие get logs выглядит следующим образом ...

Get 

// Get logs from server
export const getLogs = async (dispatch) => {
  try {
    setLoading();

    const res = await fetch('/logs');
    const data = await res.json();

    dispatch({
      type: GET_LOGS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: LOGS_ERROR,
      payload: error.response.data,
    });
  }
};

Файл, который реализует функцию getLogs, выглядит следующим образом this .. 

import Preloader from '../layout/Preloader';
import LogItem from './LogItem';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getLogs } from '../../actions/logActions';

const Logs = ({ log: { logs, loading }, getLogs }) => {
  useEffect(() => {
    getLogs();
    //   eslint-disable-next-line
  }, []);

  if (loading || logs === null) {
    return <Preloader />;
  }

  return (
    <div>
      <ul className='collection with-header'>
        <li className='collection-header'>
          <h4 className='center'>System Logs</h4>
        </li>
        {!loading && logs.length === 0 ? (
          <p className='center'>No logs to show...</p>
        ) : (
          logs.map((log) => <LogItem log={log} key={log.id} />)
        )}
      </ul>
    </div>
  );
};

Logs.propTypes = {
  log: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  log: state.log,
});

export default connect(mapStateToProps, { getLogs })(Logs);

Как правильно принять обещания в действии?

1 Ответ

0 голосов
/ 10 апреля 2020

Понял, что в getLogs отсутствует функция стрелки.

Правильный синтаксис: 

getLogs = ()=> async (dispatch) => {...}
...