Search code examples
javascriptreactjsfluxible

Why won't my Fluxible store dehydrate?


I have a pretty simple Fluxible store:

export default class NoteStore extends BaseStore {
  static storeName = "NoteStore";

  static handlers = {
    [Actions.NEW_NOTES_FETCHED]: 'handleNewNotes'
  };

  constructor(dispatcher) {
    super(dispatcher);
    this.notes = [];
  }

  handleNewNotes(notes) {
    this.notes = [];
    var i;
    for (i = 0; i < notes.length; i++){
      this.notes.push(notes[i].content);
    }
    this.emitChange();
  }

  /* ... */

  dehydrate() {
    return { notes: this.notes };
  }

  rehydrate(state) {
    this.notes = state.notes;
  }

  // Shouldn't be necessary to override?
  shouldDehydrate() {
    return true;
  }
}

NEW_NOTES_FETCHED is dispatched by an action that gets data from my backend API, and the store listens for that event and pulls in the data from the payload. As far as I can tell, all this is working because everything runs perfectly when running in the client.

The problem I'm having is that the NoteStore doesn't seem to be getting dehydrated when the server calls app.dehydrate(). I look at the JSON embedded into the page and I don't see my store anywhere, though I do see information for the RouteStore.

I registerd my store with the FluxibleContext, but do I need to do something additionally to add it to the dehydrate chain?

App bootstrapping code if relevant:

const app = new Fluxible({ component: Root });

const AppRouteStore = RouteStore.withStaticRoutes(routes);
app.registerStore(AppRouteStore);  // AppRouteStore appears in dehydrated JSON

app.registerStore(HtmlHeadStore); // Neither of these do, though HtmlHeadStore doesn't need to
app.registerStore(NoteStore);

export default app;

Solution

  • Ok, I figured out what was wrong. Basically, the action that was supposed to dispatch the NEW_NOTES_FETCHED event wasn't returning a promise and so the logic of handling the response from the backend server was never actually run, even though the request itself was made and I saw it appear on the backend's logs.

    I was about to tear my hair out puzzling over this for so long, so hopefully someone can learn from my struggle!