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

时间:2015-10-06 23:39:03

标签: javascript reactjs

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

我完成了Nodejs部分,我已经拥有了数据库中需要的数据,我已经将它转换为json,我准备将这些数据发送到前端。

我所做的只是excludedWords.contains(word) == true请求,前端的主要工具是axios。此GET请求是为了显示赌场游戏的简单经销商列表。

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

这基本上是服务部分

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部分做些什么?

这就是我真正想弄清楚的。在知道如何处理storesActions之后,我应该调用Stores还是action

Angular对我来说很容易学习,但似乎React适用于拥有至少2年JavaScript经验的人。我很难得到它。

1 个答案:

答案 0 :(得分:2)

我会更多地研究Flux架构。

基本上,您希望在代码的“then”部分执行的操作是向商店发送操作,有关调度程序的更多信息here

我经常使用的调度员调用示例如下:

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