javascript - await - Acciones asincrónicas en Redux

redux-promise

Question

Tengo una aplicación React. Necesito hacer una llamada ajax (para aprender) a un servicio en línea (asincrónico) con Redux.

Esta es mi tienda:

import { createStore, applyMiddleware } from ''redux'';
import thunk from ''redux-thunk'';
import duedates from ''./reducers/duedates''
export default applyMiddleware(thunk)(createStore)(duedates);

Estas son las acciones:

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))
)
}

Y este es el reductor:

export default (state = {}, action) => {
switch(action.type) {
case ''getDueDate'':
console.log("IN REDUCER")
return state.dueDates = action.dueDates;
default:
return state
}
}

No entiendo lo que estoy haciendo mal. La acción se llama perfectamente desde el componente. Pero luego me sale este error:

Error: las acciones deben ser objetos simples. Use middleware personalizado para acciones asíncronas.

Supongo que estoy usando mal el middleware reaction-thunk. ¿Qué estoy haciendo mal?

EDITAR

Ahora la acción llama al reductor, pero el reductor, después de cambiar el estado, no está volviendo a ejecutar el método de renderizado

 case ''getDueDate'':
console.log("IN REDUCER")
return state.dueDates = action.dueDates;

Answer 1

Creo que deberías usar la función de compose , así que es como

import {
createStore,
applyMiddleware,
compose
} from ''redux'';
import thunk from ''redux-thunk'';
import duedates from ''./reducers/duedates''
export default compose(applyMiddleware(thunk))(createStore)(duedates);

Thunk permite que un creador de acción devuelva una función en lugar de un objeto simple, por lo que la usa como

export function getDueDates() {
return dispatch => {
console.log("IN ACTION");
fetchDueDates().done(
dueDates => dispatch(getDueDatesOptimistic(dueDates.entity._embedded.dueDates))
)
};
}

Estabas devolviendo un objeto Promesa, esa era una parte del problema. Otra parte fue que redux-thunk no se ha aplicado correctamente. Apuesto a que compose debería resolver el problema.

Answer 2

Creo que es posible tener una solución de trabajo sin usar la función de compose también. Basado en la documentación del repositorio de GitHub para redux-thunk

La solución funciona para redux-thunk: ^2.0.0

import { createStore, applyMiddleware } from ''redux'';
import thunk from ''redux-thunk'';
import duedates from ''./reducers/duedates''
export function configureStore(initialState = {}) {
return createStore(
duedates,
initialState,
applyMiddleware(thunk)
);
}

Answer 3

La respuesta aceptada es desactualizada, incorrecta o complicada. Aquí están los documentos sobre el tema de composición:

http://redux.js.org/docs/api/compose.html

para que podamos hacerlo así en su lugar:

import {createStore, combineReducers, compose, applyMiddleware} from ''redux'';
import thunk from ''redux-thunk'';
const reducer = combineReducers({
user: userReducer,
items: itemsReducer
});
// here is our redux-store
const store = createStore(reducer,
compose(applyMiddleware(thunk))
);