在 React.js 中从 axios 设置存储对象答案

【问题标题】：Setting store object from axios in React.js在 React.js 中从 axios 设置存储对象
【发布时间】：2017-04-28 11:18:15
【问题描述】：

我正在开发一个用 React.js 编写的应用程序，我从 JSON 提要中获取数据，然后我将在应用程序中以各种方式使用这些数据。

我通过 axios 调用 feed：

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

在我的 reducers 文件中，我有这个：

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

当我正常使用状态来获取数据时，它工作正常，但我认为因为我试图将商店与 Web 服务一起使用，它可能由于异步过程而无法工作。

当我登录到控制台时，我得到了这个：

console 1

console 2

我来自 .NET 背景，所以我对只使用 JavaScript 工作还是很陌生，我不知道从哪里开始解决这个问题。

感谢任何帮助！

【问题讨论】：

标签： javascript reactjs redux react-redux axios

【解决方案1】：

我自己设法解决了这个问题。

Axios 是一个基于 Promise 的客户端，所以我在调用它的地方使用了 .then()。

所以这个：

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

变成这样：

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

【讨论】：

我建议你使用一些包来处理网络请求。可以是redux或者relay/graphql