[英]Understanding how to get data in React. From backend to frontend
I am working by myself in a project, I am using Reactjs and Nodejs. 我自己在一个项目中工作,正在使用Reactjs和Nodejs。
I am done with the Nodejs part, I already have the data I need from the DB, I already convert it into json and I am ready to send this data to the front end. 我已经完成了Node.js部分,已经从数据库中获取了我需要的数据,已经将其转换为json,并且准备将这些数据发送到前端。
All I am doing is a GET
request where the main tool for the front end is axios . 我正在做的是一个GET
请求,其中前端的主要工具是axios 。 This GET
request is in order to display a simple list of dealers for a Casino Game. 此GET
请求是为了显示赌场游戏的发牌人的简单列表。
What I need is a brief piece of code and explanation in order to understand what I am doing. 我需要的是一段简短的代码和说明,以了解我在做什么。 I've been reading all the info but is not that easy for me to get it because I feel unable to adapt the examples in the docs to my code, sorry, I am just a Junior Developer. 我一直在阅读所有信息,但对我来说并不那么容易,因为我觉得无法将文档中的示例适应我的代码,对不起,我只是一名初级开发人员。
This is basically the service part 这基本上是服务部分
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;
now, what I need to know is: what should I do in the actions
and the stores
part ? 现在,我需要知道的是:在actions
和stores
部分中我应该做什么?
That is what I am really trying to figure out. 这就是我真正想找出的。 After knowing what to do with the Actions
and Stores
, in the component, should I call the action
or the store
? 在知道如何处理Actions
和Stores
,应该在组件中调用action
还是store
?
Angular was so easy for me to learn, but it seems as if React is for someone with at least 2 years of experience on JavaScript. Angular对我来说是如此容易学习,但是似乎React是针对具有至少2年JavaScript经验的人的。 It's been hard for me to get it. 我很难得到它。
I would research into the Flux architecture a bit more. 我将对Flux架构进行更多研究。
Essentially what you want to do in the "then" part of your code is dispatch an action to an store, more info on dispatchers here . 本质上,您想要在代码的“然后”部分中执行的操作是将操作分派给商店,有关分派器的更多信息,请参见此处 。
An example of a call to dispatcher which I use regularly is as follows: 我经常使用的呼叫调度员的示例如下:
Dispatcher.handleViewAction({
actionType: ActionConstants.RECEIVE_STORES,
stores: stores
});
With your dispatcher handling the action above, it will then send it to each of your stores which have registered the dispatcher to handle payloads. 在您的调度员处理上述操作后,它将把它发送到注册了调度员以处理有效载荷的每个商店。 Inside this is a switch statement to handle the relevant data. 这是一个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;
});
Once it passes the switch statement, you can then emit an event Inside your store which is listened to by the view. 一旦传递了switch语句,您就可以在商店内部发出一个事件,该事件将被视图监听。
Store: 商店:
emitChange() {
this.emit('change');
},
addChangeListener(callback) {
this.on('change', callback);
},
removeChangeListener(callback) {
this.removeListener('change', callback);
},
getDirectoryStores() {
return {"data" : _directoryData};
}
View: 视图:
componentWillMount() {
DirectoryStore.addChangeListener(this._onChange);
},
componentDidMount(){
StoreActionCreator.getDirectoryStores();
},
componentWillUnmount() {
DirectoryStore.removeChangeListener(this._onChange);
},
_onChange() {
let data = DirectoryStore.getDirectoryStores();
this.setState({
data: data.data
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.