了解如何在React中获取数据。 从后端到前端

Question

我自己在一个项目中工作，正在使用Reactjs和Nodejs。

我已经完成了Node.js部分，已经从数据库中获取了我需要的数据，已经将其转换为json，并且准备将这些数据发送到前端。

我正在做的是一个GET请求，其中前端的主要工具是axios 。 此GET请求是为了显示赌场游戏的发牌人的简单列表。

我需要的是一段简短的代码和说明，以了解我在做什么。 我一直在阅读所有信息，但对我来说并不那么容易，因为我觉得无法将文档中的示例适应我的代码，对不起，我只是一名初级开发人员。

这基本上是服务部分

import axios from 'axios';

const API_ENDPOINT = `${API_URL}/services`;

const GetDealers = {
  axios.get(`${API_ENDPOINT}/get-dealers/get-dealers`)
    .then(function(response) {
      console.log('get-dealers', response);
    })

};

export default GetDealers;

现在，我需要知道的是：在actions和stores部分中我应该做什么？

这就是我真正想找出的。 在知道如何处理Actions和Stores ，应该在组件中调用action还是store ？

Angular对我来说是如此容易学习，但是似乎React是针对具有至少2年JavaScript经验的人的。 我很难得到它。

Answer 1

我将对Flux架构进行更多研究。

本质上，您想要在代码的“然后”部分中执行的操作是将操作分派给商店，有关分派器的更多信息，请参见此处 。

我经常使用的呼叫调度员的示例如下：

       Dispatcher.handleViewAction({
           actionType: ActionConstants.RECEIVE_STORES,
           stores: stores
       });

在您的调度员处理上述操作后，它将把它发送到注册了调度员以处理有效载荷的每个商店。 这是一个switch语句，用于处理相关数据。

DirectoryStore.dispatchToken = Dispatcher.register(function(payload) {

let action = payload.action;
console.log(action)
switch (action.actionType) {
    case "RECEIVE_STORES":
        setDirectoryStores(action.stores);
        break;
    case "FILTER_STORES":
        filterDirectoryStores(action);
        break;
    default:
        return true;
        break;
}
DirectoryStore.emitChange();

return true;
});

一旦传递了switch语句，您就可以在商店内部发出一个事件，该事件将被视图监听。

商店：

    emitChange() {
    this.emit('change');
},

addChangeListener(callback) {
    this.on('change', callback);
},

removeChangeListener(callback) {
    this.removeListener('change', callback);
},
getDirectoryStores() {
    return {"data" : _directoryData};
}

视图：

        componentWillMount() {
        DirectoryStore.addChangeListener(this._onChange);
    },
    componentDidMount(){
        StoreActionCreator.getDirectoryStores();
    },
    componentWillUnmount() {
        DirectoryStore.removeChangeListener(this._onChange);
    },
    _onChange() {
        let data = DirectoryStore.getDirectoryStores();

        this.setState({
            data: data.data
        });
    }