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;
