Discussion on: Fetching data with React the easy way

[Jack]

So over complicated. Let's see, dataLoaded implies a boolean value but it's a function that's actually called on every render (so why not just make it a boolean) displayUsers is an async function that never actually does anything async (it calls another async function but doesnt await it). You're storing the api response in a global variable which is just begging to cause bugs. Offloading everything into generic actions and states makes it much harder to follow. I don't see you setting loading to false when you've finished fetching, only on error. I could go on but my point is youve tried to show how data fetching could be simple, with one of the most awkward and convoluted examples ever.

[artydev]

Hello,
+1 for not awaiting...and others.

I have not published the 'index.js' part, perhaps it will make you understand my way of doing so.
And in fact, when I say simpler I refered precisely to this part...

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

import merge from "mergerino";
import { stream, scan } from "flyd";

var Actions = update => {
  return {
    loadData: results =>
      update({
        data: results,
        loading: false
      }),
    setLoading: status =>
      update({
        loading: status
      })
  };
};

var initialState = {
  start: false,
  data: [],
  loading: false
};

// reactive variable
var update = stream();
// kind of Redux :-)
var states = scan(merge, initialState, update);
// actions triggered from the view
var actions = Actions(update);
// view = f(state, actions)
ReactDOM.render(<App states={states} actions={actions} />, root);

I let the example as it is, in order to have comments on it :-)
Don't hesitate to read my others posts and correct me

Also you can read my later post on this subject :
reactQuery

Regards