Le réducteur renvoie undefined quand il utilise redux-promise et axios

Question

J'ai ce problème lorsque j'essaie d'invoquer une fonction de rappel après la résolution de la promesse (en utilisant .then). demande une sorte de promesse différente que le réducteur renvoie comme indéfinie :

action :

   export function lookup(company, callback) {
      const id = company.textfield;
      const url = `${ROOT_URL}${id}`;

      const request = axios.get(url)
       .then(() => callback())

      return {
        type: LOOK_UP,
        payload: request,
        meta: id
     };
 }

réducteur :

import { LOOK_UP } from '../actions/index';

export default function(state = {}, action) {
    switch (action.type) {
        case LOOK_UP:
            const data = action.payload.data;
            const id = action.meta;

            if (data.Success === true) {
                return { ...state, [id]: data.CompanyInformation };
            } else {
                return state;
            }
    }
    return state;
}

Comme vous pouvez le voir, je passe les données de l'API que axios obtient à mon reducer. Après cela, j'ai défini l'état et j'ai besoin d'invoquer ce callback qui est dans 'actions' (il crée alors un autre appel d'action dans le composant). Malheureusement, j'ai obtenu l'erreur que dans le réducteur const data = action.payload.data est indéfinie.

Lorsque je n'utilise pas ce callback, tout fonctionne bien, mais le cas est que je dois invoquer ce callback seulement après que ce réducteur renvoie un nouvel état.

Answer 1

La meilleure façon d'utiliser un autre callback en action est de remplacer votre middleware "redux-promise" par "redux-thunk".

import ReduxThunk from 'redux-thunk'
const store = createStore(applyMiddleware(ReduxThunk));

action :

export function lookup(company, callback) {
  const id = company.textfield;
  const url = `${ROOT_URL}${id}`;

  return function(dispatch) { 
        axios.get(url)
       .then((res) => {
            dispatch({ type: LOOK_UP, payload: res,  meta: id });
            callback();
         )
      };
 }

réducteurs :

import { LOOK_UP } from '../actions/index';

export default function(state = {}, action) {
    switch (action.type) {
        case LOOK_UP:
            const data = action.payload.data;
            const id = action.meta;

            if (data.Success === true) {
                return { ...state, [id]: data.CompanyInformation };
            } else {
                return state;
            }
    }
    return state;

}

Answer 2

request est égal à toute cette déclaration :

const request = axios.get(url)
   .then(() => callback())

Donc si callback() ne renvoie pas quelque chose, alors la promesse ne donnera rien. Je suppose que vous récupérez des données avec cet appel, vous devez donc transmettre ces données, sinon votre reducer ne les obtiendra jamais. Comme ceci :

const request = axios.get(url)
   .then((dataFromRequest) => { 
     callback(); 
     return dataFromRequest; 
});

Ou vous pouvez séparer les deux et écrire quelque chose comme :

const request = axios.get(url);
request.then(() => callback());

return {
    type: LOOK_UP,
    payload: request,
    meta: id
 };

Comparez les promesses dans l'extrait ci-dessous :

const promisedData = () => Promise.resolve(42);

promisedData()
  .then(data => console.log('Resolved data is ', data));

const promisedTrasformedData = () => 
   Promise.resolve(700)
   .then(data => data - 34);

promisedTrasformedData()
  .then(transformedData => console.log('Transformed data is ', transformedData));

const promisedAndLostData = () => 
  Promise.resolve(42)
 .then(data => returnNoting())

function returnNoting() { };

promisedAndLostData()
 .then(lostData => console.log('Lost data: ', lostData))