So far, we have only been dealing with static data in our Flux flow. The time has now come to add real data connections to the flow and thereby real data. It is time to start talking to APIs through AJAX and HTTP. Fetching data is quite easy nowadays, thanks to the fetch API and libraries such as RxJS. What you need to think about when incorporating it in the flow is:
- Where to place the HTTP call
- How to ensure that the store is updated and interested views are notified
We have a point at which we register the store to the dispatcher, with this piece of code:
// excerpt from store-actions-immutable.js
const createProduct = (product) => {
if (!store["products"]) {
store["products"] = [];
}
store.products = [...store.products, Object.assign(product)];
}
dispatcher.register(({ type, data }) => {
switch (type) {
case CREATE_PRODUCT:
createProduct(data);
store.emitChange();
break;
/* other cases below */
}
})If we do this for real...