There will be two types of actions in our app: those affecting a specific component's state and those affecting the general app state. We want to store the latter somewhere out of the component's code, so we can reuse and easily maintain them. An extended practice in MobX (and also Redux or Flux) apps is to create a file named actions.js, where we will store all the actions modifying business logic for our app.
In the case of our RSS reader, the business logic revolves around feeds and entries, so we will capture all the logic dealing with these models in this file:
/*** actions.js ** */
import store from './store';
import xml2json from 'simple-xml2json';
export async function fetchFeed(url) {
const response = await fetch(url);
const xml = await response.text();
const json = xml2json.parser(xml);
return {
entry:
(json.feed && json.feed.entry) || (json.rss &&
json.rss.channel.item),
title:
(json.feed && json.feed...