How to create API calls in REACT and FLUX - reactjs

Question

I'm new to react and flux and I am having a hard time trying to figure out how to load data from a server. I am able to load the same data from a local file with no issues.
So first up I have this controller view (controller-view.js) that passes down initial state to a view (view.js)
controller-view.js
var viewBill = React.createClass({
getInitialState: function(){
return {
bill: BillStore.getAllBill()
};
},
render: function(){
return (
<div>
<SubscriptionDetails subscription={this.state.bill.statement} />
</div>
);
}
});
module.exports = viewBill;
view.js
var subscriptionsList = React.createClass({
propTypes: {
subscription: React.PropTypes.array.isRequired
},
render: function(){
return (
<div >
<h1>Statement</h1>
From: {this.props.subscription.period.from} - To {this.props.subscription.period.to} <br />
Due: {this.props.subscription.due}<br />
Issued:{this.props.subscription.generated}
</div>
);
}
});
module.exports = subscriptionsList;
I have an actions file that loads the INITAL data for my app. So this is data that is not called by as user action, but called from getInitialState in the controller view
InitialActions.js
var InitialiseActions = {
initApp: function(){
Dispatcher.dispatch({
actionType: ActionTypes.INITIALISE,
initialData: {
bill: BillApi.getBillLocal() // I switch to getBillServer for date from server
}
});
}
};
module.exports = InitialiseActions;
And then my data API looks like this
api.js
var BillApi = {
getBillLocal: function() {
return billed;
},
getBillServer: function() {
return $.getJSON('https://theurl.com/stuff.json').then(function(data) {
return data;
});
}
};
module.exports = BillApi;
And this is the store
store.js
var _bill = [];
var BillStore = assign({}, EventEmitter.prototype, {
addChangeListener: function(callback) {
this.on(CHANGE_EVENT, callback);
},
removeChangeListener: function(callback) {
this.removeListener(CHANGE_EVENT, callback);
},
emitChange: function() {
this.emit(CHANGE_EVENT);
},
getAllBill: function() {
return _bill;
}
});
Dispatcher.register(function(action){
switch(action.actionType){
case ActionTypes.INITIALISE:
_bill = action.initialData.bill;
BillStore.emitChange();
break;
default:
// do nothing
}
});
module.exports = BillStore;
So as I mentioned earlier, when I load data locally using BillApi.getBillLocal() in actions everything works fine. But when I change to BillApi.getBillServer() I get the followind errors in the console...
Warning: Failed propType: Required prop `subscription` was not specified in `subscriptionsList`. Check the render method of `viewBill`.
Uncaught TypeError: Cannot read property 'period' of undefined
I also added a console.log(data) to BillApi.getBillServer() and I can see that the data is returned from the server. But it is displayed AFTER I get the warnings in the console which I believe may be the issue. Can anyone offer some advice or help me to fix it? Sorry for such a long post.
UPDATE
I made some changes to the api.js file (check here for change and DOM errors plnkr.co/edit/HoXszori3HUAwUOHzPLG ) as it was suggested that the issue is due to how I handle the promise. But it still seems to be the same issue as you can see in the DOM errors.

Answer 1

This is an async issue. Using $.getJSON().then() is not enough. Since it returns a promise object, you have to handle the promise at invocation by doing something like api.getBill().then(function(data) { /*do stuff with data*/ });
I made a CodePen example with the following code:
function searchSpotify(query) {
return $.getJSON('http://ws.spotify.com/search/1/track.json?q=' + query)
.then(function(data) {
return data.tracks;
});
}
searchSpotify('donald trump')
.then(function(tracks) {
tracks.forEach(function(track) {
console.log(track.name);
});
});

Answer 2

It looks like from your code that the intended flow is something like:
some component fires initialize action,
initialize action calls API
which waits for results from server (I think here is where things break down: your component render starts before results from server are back),
then passes the result to the store,
which emits change and
triggers a re-render.
In a typical flux setup, I would advise to structure this somewhat different:
some component calls API (but does not fire action to dispatcher yet)
API does getJSON and waits for server results
only after results are received, API triggers the INITIALIZE action with received data
store responds to action, and updates itself with results
then emits change
which triggers re-render
I am not so familiar with jquery, promises and chaining, but I think this would roughly translate into the following changes in your code:
controller-view needs a change listener to the store: add a componentDidMount() function that adds an event listener to flux store changes.
in controller-view, the event listener triggers a setState() function, which fetches the most recent _bill from the store.
move the dispatcher.dispatch() from your actions.js to your api.js (replacing return data);
That way, your component initially should render some 'loading' message, and update as soon as data from server is in.

Answer 3

An alternative method would be to check if the prop of subscription exists before you play with the data.
Try modifying your code to look a bit like this:
render: function(){
var subscriptionPeriod = '';
var subscriptionDue = ['',''];
var subscriptionGenerated = '';
if(this.props.subscription !== undefined){
subscriptionPeriod = this.props.subscription.period;
subscriptionDue = [this.props.subscription.due.to,this.props.subscription.due.from];
subscriptionGenerated = this.props.subscription.generated;
}
return (
<div >
<h1>Statement</h1>
From: {subscriptionPeriod[0]} - To {subscriptionPeriod[1]} <br />
Due: {subscriptionDue}<br />
Issued:{subscriptionGenerated}
</div>
);
}
In the render function before the return try adding the following:
if(this.props.subscription != undefined){
// do something here
}
Due your data changing the state of the top level component it will retrigger the render once it has the data with the subscription prop being defined.

Answer 4

If I understand correctly you could try with something like this
// InitialActions.js
var InitialiseActions = {
initApp: function(){
BillApi.getBill(function(result){
// result from getJson is available here
Dispatcher.dispatch({
actionType: ActionTypes.INITIALISE,
initialData: {
bill: result
}
});
});
}
};
module.exports = InitialiseActions;
//api.js
var BillApi = {
getBillLocal: function() {
console.log(biller);
return biller;
},
getBill: function(callback) {
$.getJSON('https://theurl.com/stuff.json', callback);
}
};
$.getJSON does not return the value from the http request. It makes it available to the callback.
The logic behind this is explained in detail here: How to return the response from an asynchronous call?

Answer 5

I'll separate my Actions, Stores and Views (React components).
First of all, I'd implement my Action like this:
import keyMirror from 'keymirror';
import ApiService from '../../lib/api';
import Dispatcher from '../dispatcher/dispatcher';
import config from '../env/config';
export let ActionTypes = keyMirror({
GetAllBillPending: null,
GetAllBillSuccess: null,
GetAllBillError: null
}, 'Bill:');
export default {
fetchBills () {
Dispatcher.dispatch(ActionTypes.GetAllBillPending);
YOUR_API_CALL
.then(response => {
//fetchs your API/service call to fetch all Bills
Dispatcher.dispatch(ActionTypes.GetAllBillSuccess, response);
})
.catch(err => {
//catches error if you want to
Dispatcher.dispatch(ActionTypes.GetAllBillError, err);
});
}
};
The next is my Store, so I can keep track of all changes that suddenly may occur during my api call:
class BillStore extends YourCustomStore {
constructor() {
super();
this.bindActions(
ActionTypes.GetAllBillPending, this.onGetAllBillPending,
ActionTypes.GetAllBillSuccess, this.onGetAllBillSuccess,
ActionTypes.GetAllBillError , this.onGetAllBillError
);
}
getInitialState () {
return {
bills : []
status: Status.Pending
};
}
onGetAllBillPending () {
this.setState({
bills : []
status: Status.Pending
});
}
onGetAllBillSuccess (payload) {
this.setState({
bills : payload
status: Status.Ok
});
}
onGetAllBillError (error) {
this.setState({
bills : [],
status: Status.Errors
});
}
}
export default new BillStore();
Finally, your component:
import React from 'react';
import BillStore from '../stores/bill';
import BillActions from '../actions/bill';
export default React.createClass({
statics: {
storeListeners: {
'onBillStoreChange': BillStore
},
},
getInitialState () {
return BillStore.getInitialState();
},
onBillStoreChange () {
const state = BillStore.getState();
this.setState({
bills : state.bills,
pending: state.status === Status.Pending
});
},
componentDidMount () {
BillActions.fetchBills();
},
render () {
if (this.state.pending) {
return (
<div>
{/* your loader, or pending structure */}
</div>
);
}
return (
<div>
{/* your Bills */}
</div>
);
}
});

Answer 6

Assuming you are actually getting the data from your API, but are getting it too late and errors are thrown first, try this:
In your controller-view.js, add the following:
componentWillMount: function () {
BillStore.addChangeListener(this._handleChangedBills);
},
componentWillUnmount: function () {
BillStore.removeChangeListener(this._handleChangedBills);
},
_handleChangedBills = () => {
this.setState({bill: BillStore.getAllBill()});
}
And in your getInitialState function, give an empty object with the structure that your code expects (specifically, have a 'statement' object inside it). Something like this:
getInitialState: function(){
return {
bill: { statement: [] }
};
},
What is happening is that when you are getting your initial state, it isn't fetching from the store properly, and so will return an undefined object. When you then ask for this.state.bill.statement, bill is initialized but undefined, and so it cannot find anything called statement, hence why you need to add it in. After the component has had a bit more time (this is an async problem like the other posters said), it should fetch properly from the store. This is why we wait for the store to emit the change for us, and then we grab the data from the store.