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

Understanding how to get data in React. From backend to frontend

本文关键字：数据 后端 前端 获取 React 了解      更新时间：2023-09-26

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

我已经完成了Nodejs部分，我已经从DB中获得了我需要的数据，我已经将其转换为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经验的人准备的。

我会更深入研究Flux的架构。

本质上，你想在代码的"then"部分做的是将一个操作分派给一个store，更多关于分派器的信息在这里。

我经常使用的一个调用调度程序的例子如下:

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

当dispatcher处理上面的动作时，它将把它发送到每个已经注册了dispatcher来处理有效负载的store。其中是一个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
        });
    }

相关文章：