Fork me on GitHub

I'm sure this has been asked somewhere before but I can't find a solid answer. Where's the best place to fetch initial data in a reframe app? Should it be inside components, then directed back to the state via an action? Or in the exported init function in a similar to the init-db action?


In some cases there is a clear "data owner" component and to me it would make more sense to give them the responsibilty, but in other cases a fragment of data is shared between many components and picking one to manage it seems messy.


I haven't, but thanks for the quick response


I'll take a look


Can you explain what "responsibility" a component might have?


Components are simply the GUI reflection of the current state in app-db


Event Handlers (triggered by dispatches) tend to perform the applciation's control logic


Be sure to look at: - the wiki - the exmaples


Ok, yeah. So if my app-db has a :posts key that stores a vector of posts, and the posts are stored on the server (not available at compile time), then something needs to be responsible for fetching those posts and ultimately an event handler will insert them into the app-db


So the initial suggestion was that, for example the posts-list component is responsible for fetching the data, then dispatching an event, so that the appropriate event handler could populate the app-db


Ok. the "Scales Up" section of the bootstrap article answers my question perfectly


Dispatch the request event from the init function, then fetch the data inside an event handler


This is my first venture into abstractions above Reagent, so I guess I'm still guilty of thinking in terms of React components managing their own lifecycles and dependencies


With re-frame, the components know what data they need (in the form of a subscription), but they don't care about how it ends up there. That's someone else's responsibility.


Yes, that's right.


Components simply render the current state of app-db


For the user to see.


it is event handlers which know what to do when an event happens. How should app-db be mutated? What further data is required (from a server)?


Just to make sure I'm on the right page then. Take a post component that gets an id argument at runtime, meaning data can't be pre-fetched. The appropriate way to handle this is to use this id to dispatch a parameterized event and create a parameterized subscription?


The component becomes indirectly responsible for managing its data, but with abstracted insulation from actually making network requests and storing it in the state.


In response to the user clicking on "item X" and wanting to edit it, there would be a dispatch which said "the user has selected id X" prehaps something like [:edit-item some-id]


The event handler (associated with :edit-item) would cause a change in app-db, indicating that item X was to be displayed by the GUI (popup?) This event handler would also do whatever it needed to do to ensure that item X was loaded (from the server) and put into app-db.


So, as you can see, it is NOT the component which shows item X which is responsible for fetching it. It is the event handler for the event [:edit-item some-id] which does the work. It knows what the user wants to do, and its job is to manipulate app-db so as to deliver it.


Great, I think that's where I'm at. Thanks for the help and thanks for re-frame.


Good to hear. Make sure you read that Wiki simple_smile


Exactly what I'm doing now. The README (although great) is big enough that I don't seem to be able to get through it in one go without missing stuff (like the link to the wiki)


Then the /examples ... particularly the todomvc one


are you the josh hill I work with? simple_smile