Store-Objekt aus Axios in React.js setzen

Question

Ich arbeite an einer App, geschrieben in React.js, wo ich Daten von einem JSON-Feed bekomme und dann werde ich diese Daten auf verschiedene Arten in der App verwenden.

Ich mache den Anruf an das Futter über axios:

module.exports = { 
 
    getMainPlaylist: function() { 
 
    var requestUrl = `${MAIN_PLAYLIST_FEED_URL}`; 
 

 
    return axios.get(requestUrl).then(function (res) { 
 
     return res.data.playlist 
 
    }, function (err) { 
 
     alert('error'); 
 
    }); 
 
    } 
 
};

In meiner app.jsx Datei, ich habe folgendes:

store.subscribe(() => { 
 
    var state = store.getState(); 
 
    console.log('New state: ', state); 
 
}); 
 

 
var mainPlaylist = MainPlaylistAPI.getMainPlaylist(); 
 
store.dispatch(actions.addMainPlaylist(mainPlaylist));

In meinen Handlungen Datei, ich habe dies:

export var addMainPlaylist = (mainPlaylist) => { 
 
    return { 
 
    type: 'ADD_MAIN_PLAYLIST', 
 
    mainPlaylist 
 
    } 
 
};

In meinen Reduzierungen Datei Ich habe diese:

export var playlistReducer = (state = [], action) => { 
 
    switch (action.type) { 
 
    case 'ADD_MAIN_PLAYLIST': 
 
     return [ 
 
     ...state, 
 
     ...action.mainPlaylist 
 
     ]; 
 
    default: 
 
     return state; 
 
    } 
 
};

Wenn ich den Zustand wurde mit Wie üblich, um die Daten zu bekommen, war es in Ordnung, aber ich denke, weil ich versuche, den Laden w zu verwenden Bei einem Web-Service funktioniert es wahrscheinlich wegen des asynchronen Prozesses nicht.

Als ich an die Konsole anmelden bekomme ich dies:

console 1

console 2

Ich komme aus einem .NET-Hintergrund, so bin ich ziemlich neu nur in JavaScript zu arbeiten, und ich habe keine Idee, wo zu beginnen, dies zu beheben.

Jede Hilfe wird geschätzt!

Answer 1

Ich habe es geschafft, dies selbst zu lösen.

Axios ist ein Versprechen-gegründeter Kunde, also benutzte ich .then(), wo ich es nenne.

So folgt aus:

var mainPlaylist = MainPlaylistAPI.getMainPlaylist(); 
 
store.dispatch(actions.addMainPlaylist(mainPlaylist));

diese werden:

MainPlaylistAPI.getMainPlaylist().then(function (data) { 
 
    store.dispatch(actions.addMainPlaylist(data)); 
 
}, function(e) { 
 
    // Handle errors 
 
});