Настройка объекта хранения из axios в React.js

Question

Я работаю над приложением, написанным в React.js, где я получаю данные из канала JSON, а затем я буду использовать эти данные различными способами в приложении.

я сделать вызов к корму через Аксиос:

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'); 
 
    }); 
 
    } 
 
};

В моем app.jsx файле, я следующее:

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

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

В файле мои действия, я это:

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

В моих редукторами файл у меня есть это:

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

Когда я использую состояние как обычно, чтобы получить данные, они работали нормально, но я думаю, потому что я пытаюсь использовать магазин w с веб-службой он, вероятно, не работает из-за асинхронного процесса.

При входе в консоль я получаю это:

console 1

console 2

Я из .NET фона, поэтому я не буду достаточно новый работать только в JavaScript, и у меня нет Идея, где можно исправить это.

Любая помощь приветствуется!

Answer 1

Мне удалось решить это самостоятельно.

Axios - это клиент на основе обещаний, поэтому я использовал .then(), где я его называю.

Так что:

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

Стать это:

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