У меня есть приложение React, мне нужно сделать ajax-вызов (чтобы узнать) в онлайн-службу (async) с помощью Redux.
Это мой магазин:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import duedates from './reducers/duedates'
export default applyMiddleware(thunk)(createStore)(duedates);
Это действия:
import rest from '../Utils/rest';
export function getDueDatesOptimistic(dueDates){
console.log("FINISH FETCH");
console.log(dueDates);
return {
type: 'getDueDate',
dueDates
}
}
export function waiting() {
console.log("IN WAIT");
return {
type: 'waiting'
}
}
function fetchDueDates() {
console.log("IN FETCH");
return rest({method: 'GET', path: '/api/dueDates'});
}
export function getDueDates(dispatch) {
console.log("IN ACTION");
return fetchDueDates().done(
dueDates => dispatch(getDueDatesOptimistic(dueDates.entity._embedded.dueDates))
)
}
И это редуктор:
export default (state = {}, action) => {
switch(action.type) {
case 'getDueDate':
console.log("IN REDUCER")
return state.dueDates = action.dueDates;
default:
return state
}
}
Я не понимаю, что я делаю неправильно. Действие отлично называется компонентом. Но затем я получаю эту ошибку:
Ошибка: действия должны быть обычными объектами. Используйте специализированное промежуточное программное обеспечение для асинхронных действий.
Думаю, я использую неправильное промежуточное ПО. Что я делаю неправильно?
ИЗМЕНИТЬ
Теперь действие вызывает редуктор, но редуктор после изменения состояния не повторяет метод рендеринга
case 'getDueDate':
console.log("IN REDUCER")
return state.dueDates = action.dueDates;