Nicht behandelte Ablehnung (Fehler): Aktionen müssen einfache Objekte sein. Verwenden Sie benutzerdefinierte Middleware für asynchrone Aktionen.
Ich wollte mit jedem Beitrag Kommentare hinzufügen. Wenn Abrufbeiträge ausgeführt werden, möchte ich die Abrufkommentar-API für alle Beiträge aufrufen.
export function bindComments(postId) {
return API.fetchComments(postId).then(comments => {
return {
type: BIND_COMMENTS,
comments,
postId
}
})
}
reactjs
react-redux
Rajib Ahmed
quelle
quelle
Sie können Fetch nicht in Aktionen ohne Middleware verwenden. Aktionen müssen einfache Objekte sein. Sie können eine Middleware wie Redux-Thunk oder Redux-Saga verwenden, um eine andere Aktion abzurufen und dann auszulösen.
Hier ist ein Beispiel für eine asynchrone Aktion mit Redux-Thunk-Middleware.
export function checkUserLoggedIn (authCode) { let url = `${loginUrl}validate?auth_code=${authCode}`; return dispatch => { return fetch(url,{ method: 'GET', headers: { "Content-Type": "application/json" } } ) .then((resp) => { let json = resp.json(); if (resp.status >= 200 && resp.status < 300) { return json; } else { return json.then(Promise.reject.bind(Promise)); } }) .then( json => { if (json.result && (json.result.status === 'error')) { dispatch(errorOccurred(json.result)); dispatch(logOut()); } else{ dispatch(verified(json.result)); } } ) .catch((error) => { dispatch(warningOccurred(error, url)); }) } }
quelle
Für zukünftige Suchende, die möglicherweise einfache Details wie mich fallen gelassen haben, habe ich in meinem Fall einfach vergessen, meine Aktionsfunktion in Klammern aufzurufen.
action.js:
export function addNewComponent() { return { type: ADD_NEW_COMPONENT, }; }
myComponent.js:
import React, { useEffect } from 'react'; import { addNewComponent } from '../../redux/actions'; useEffect(() => { dispatch(refreshAllComponents); // <= Here was what I've missed. }, []);
Ich habe vergessen, die Aktionsfunktion mit zu versenden
()
. Damit war mein Problem gelöst.useEffect(() => { dispatch(refreshAllComponents()); }, []);
Auch dies hat vielleicht nichts mit dem Problem von OP zu tun, aber ich hoffe, ich helfe Menschen mit dem gleichen Problem wie ich.
quelle
Verwenden Sie die Pfeilfunktionen, um die Lesbarkeit des Codes zu verbessern. Sie müssen nichts zurückgeben
API.fetchComments
. Der Api-Aufruf ist asynchron, wenn die Anforderung abgeschlossenthen
ist. Sie erhalten die Antwort. Dort müssen Sie nur nochdispatch
eingeben und Daten eingeben.Der folgende Code erledigt den gleichen Job, indem er die Pfeilfunktionen verwendet.
export const bindComments = postId => { return dispatch => { API.fetchComments(postId).then(comments => { dispatch({ type: BIND_COMMENTS, comments, postId }); }); }; };
quelle
Der Fehler besteht lediglich darin, dass Sie eine Middleware dazwischen einfügen müssen, um asynchrone Vorgänge zu handhaben.
Sie könnten das tun durch:
Inside index.js import thunk from "redux-thunk" ...createStore(rootReducers, applyMiddleware(thunk));
Jetzt funktionieren asynchrone Vorgänge in Ihren Funktionen.
quelle
Ich hatte das gleiche Problem, als ich das Hinzufügen von composeEnhancers verpasst hatte. Sobald dies eingerichtet ist, können Sie einen Blick auf die Ersteller von Aktionen werfen. Sie erhalten diesen Fehler, wenn dies nicht ebenfalls eingerichtet ist.
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore( rootReducer, composeEnhancers(applyMiddleware(thunk)) );
quelle
Aktionsdefinition
const selectSlice = () => { return { type: 'SELECT_SLICE' } };
Aktion Versand
store.dispatch({ type:'SELECT_SLICE' });
Stellen Sie sicher, dass die Objektstruktur der definierten Aktion mit der ausgelösten Aktion übereinstimmt. In meinem Fall wurde beim Versenden der Aktion der Eigenschaft kein Typ zugewiesen
type
.quelle