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

Question

I am working by myself in a project, I am using Reactjs and 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.

All I am doing is a GET request where the main tool for the front end is axios. This GET request is in order to display a simple list of dealers for a Casino Game.

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 ?

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?

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. It's been hard for me to get it.

Dont sell yourself short! We're all just developers out there fighting the same fight! — Sten Muchow
– Sten Muchow, Commented Feb 2, 2016 at 7:30

AndyD · Accepted Answer · 2015-10-07 00:42:09Z

2

I would research into the Flux architecture a bit more.

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.

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.

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

answered Oct 7, 2015 at 0:42

AndyD

8957 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

AndyD Over a year ago

emitChange - this gets called in the store dispatchToken call

Non Over a year ago

but wait a minute, Dispatcher.handleViewAction and DirectoryStore.dispatchToken goes inside the .then in the service ? I am a little confuse.

AndyD Over a year ago

Place the dispatch token inside the file which you use for the store as the token is an extension of the store object

Non Over a year ago

I am getting this: Uncaught ReferenceError: DirectoryStore is not defined

AndyD Over a year ago

DirectoryStore should be the name of your flux store

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related