Я получаю две ошибки, которые я сузил, чтобы они были связаны с действиями thunk и async.
Первый — «Ошибка: Действия должны быть простыми объектами. Используйте специальное промежуточное ПО для асинхронных действий».
И второе — «Необработанное отклонение (TypeError): error.response is undefined»
Ссылка github на проект находится здесь: https://github.com/paalpwmd/react_front_to_back/tree/master/itlogger
Мое действие по получению журналов выглядит так...
получить
// 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, выглядит так.
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);
Как я могу правильно принять обещания в действии?