Des actions asynchrones dans Redux
J'ai une Réagir Application, j'ai besoin de faire un appel ajax (pour apprendre) à un service en ligne (asynchrone) avec Redux.
C'est mon magasin:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import duedates from './reducers/duedates'
export default applyMiddleware(thunk)(createStore)(duedates);
C'est les actions:
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))
)
}
Et c'est le réducteur:
export default (state = {}, action) => {
switch(action.type) {
case 'getDueDate':
console.log("IN REDUCER")
return state.dueDates = action.dueDates;
default:
return state
}
}
Je n'obtiens pas ce que je fais mal. L'action est appelé parfaitement à partir du composant. Mais ensuite, j'obtiens cette erreur:
Erreur: les Actions doivent être simples objets. Utilisation personnalisée du middleware pour des actions asynchrones.
Je suppose que je suis en utilisant mal la réaction de thunk middleware.
Ce que je fais mal?
MODIFIER
Maintenant l'action de l'appelant pour le réducteur, mais le réducteur, après un changement d'état, n'est pas de ré-exécuter la méthode render
case 'getDueDate':
console.log("IN REDUCER")
return state.dueDates = action.dueDates;
Vous devez vous connecter pour publier un commentaire.
Je pense que vous devriez être à l'aide de
compose
fonction, donc c'est commeThunk permet une action créateur de retour d'une fonction à la place de plaine-objet, si vous l'utilisez comme une
Vous, de retour d'une Promesse de l'objet, qui a été une partie du problème. Une autre partie a été que redux-thunk n'a pas été correctement appliquée. Je parie
compose
devriez obtenir le problème résolu.return
l'étatreturn state.dueDates = action.dueDates;
, il n'est pas l'appel de rendre à nouveau.. dois-je ajouter quelque chose?return state.dueDates = action.dueDates;
return {...state, dueDates: action.dueDates}
.Accepté la réponse est obsolète, mal ou trop alambiqué. Voici les docs sur la composition du sujet:
http://redux.js.org/docs/api/compose.html
nous pouvons le faire comme ceci à la place:
Je crois qu'il est possible d'avoir une solution de travail sans l'aide de la
compose
fonction de trop. Sur la base des documents depuis le dépôt GitHub pour redux-thunkSolution fonctionne pour
redux-thunk: ^2.0.0
createReducer
viennent?createReducer
a une fonction pour éviter de code réutilisable et prises à partir de réagissent-standardimport thunkMiddleware from 'redux-thunk'.