React-Redux: Acties moeten gewone objecten zijn. Gebruik aangepaste middleware voor asynchrone acties

Onverwerkte afwijzing (fout): acties moeten gewone objecten zijn. Gebruik aangepaste middleware voor asynchrone acties.

Ik wilde bij elk bericht opmerkingen toevoegen. Dus wanneer ophaalberichten worden uitgevoerd, wil ik de fetch comment-API voor alle berichten aanroepen.

export function bindComments(postId) {
  return API.fetchComments(postId).then(comments => {
    return {
      type: BIND_COMMENTS,
      comments,
      postId
    }
  })
}

Antwoord 1, autoriteit 100%

U moet verzenden nadat het asynchrone verzoek is beëindigd.

Dit zou werken:

export function bindComments(postId) {
    return function(dispatch) {
        return API.fetchComments(postId).then(comments => {
            // dispatch
            dispatch({
                type: BIND_COMMENTS,
                comments,
                postId
            });
        });
    };
}

Antwoord 2, autoriteit 45%

Voor toekomstige zoekers die misschien eenvoudige details zoals ik hebben laten vallen, in mijn geval ben ik gewoon vergeten mijn actiefunctie tussen haakjes aan te roepen.

actions.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.
  }, []);

Ik ben vergeten de actiefunctie te verzenden met (). Dus dit loste mijn probleem op.

 useEffect(() => {
    dispatch(refreshAllComponents());
  }, []);

Nogmaals, dit heeft misschien niets te maken met het probleem van OP, maar ik hoop dat ik mensen kan helpen met hetzelfde probleem als het mijne.

Antwoord 3, autoriteit 29%

De fout vraagt ​​u simpelweg om een ​​middleware ertussen in te voegen die zou helpen om asynchrone bewerkingen af ​​te handelen.

Je zou dat kunnen doen door:

npm ik redux-thunk

       Inside index.js
import thunk from "redux-thunk" 
...createStore(rootReducers, applyMiddleware(thunk));

Nu werken asynchrone bewerkingen binnen uw functies.

Antwoord 4, autoriteit 17%

Je kunt fetch niet gebruiken in acties zonder middleware. Acties moeten gewone objecten zijn. Je kunt een middleware zoals redux-thunk of redux-saga gebruiken om op te halen en vervolgens een andere actie te verzenden.

Hier is een voorbeeld van asynchrone actie met behulp van 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));
      })
  }
}

Antwoord 5, autoriteit 9%

Maak gebruik van Arrow-functies om de leesbaarheid van code te verbeteren.
Het is niet nodig om iets terug te sturen in API.fetchComments, de API-aanroep is asynchroon wanneer het verzoek is voltooid thenzal het antwoord krijgen, daar moet je gewoon dispatchtype en gegevens.

De onderstaande code doet hetzelfde werk door gebruik te maken van Arrow-functies.

export const bindComments = postId => {
  return dispatch => {
    API.fetchComments(postId).then(comments => {
      dispatch({
        type: BIND_COMMENTS,
        comments,
        postId
      });
    });
  };
};

Antwoord 6, autoriteit 5%

Wijzigen:

export const <youractionName> = async (dispatch) => {}

naar,

export const <youractionName> = () => async (dispatch) => {}

Dit heeft mijn probleem opgelost. Een ‘() =>’

. gemist

Antwoord 7, autoriteit 3%

Ik had hetzelfde probleem als dat ik het toevoegen van composeEnhancers had gemist. Zodra dit is ingesteld, kunt u actie-makers bekijken. Je krijgt deze foutmelding ook als dit niet is ingesteld.

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunk))
);

Antwoord 8

Actiedefinitie

const selectSlice = () => {
  return {
    type: 'SELECT_SLICE'
  }
};

Actieverzending

store.dispatch({
  type:'SELECT_SLICE'
});

Zorg ervoor dat de objectstructuur van de gedefinieerde actie hetzelfde is als de verzonden actie. In mijn geval werd tijdens het verzenden van de actie type niet toegewezen aan eigenschap type.

Antwoord 9

Als je met redux-observable werkt, controleer dan of je actie een waarneembaar resultaat oplevert. Ik had het probleem omdat ik een kaart gebruikte en geen mergemap

// error
    export const myEpic = (action$: any) =>
      action$.pipe(
        ofType('...'),
        map((x => x.payload),
        map((x) => callAPi(x)),
      )
// success
        export const myEpic = (action$: any) =>
          action$.pipe(
            ofType('...'),
            map((x => x.payload),
            mergeMap((x) => callAPi(x)),
          )

Antwoord 10

Gebruik redux-thunk, setup met redux & maak een actie als deze

export const actionName = (data) => dispatch => {
  dispatch({
    type:"ACTION_TYPE"
    payload:"my payload"
  })
}

const [loading, setLoading] = useState(false)