menuor settings to define if it should show featured images or not, and then some state that is useful while the app is running, like
notificationspackage wants to add an item to the
menuonly when the browser actually supports notifications. That's super easy to do by just using the
frontity.settings.jsfile. Yes, I know, that makes no sense, but I hope it gives you a sense of how flexible this pattern is.
tiny-router. It exposes three props:
linkrepresents the current URL of your app and it changes when you use the action
actions.router.set("/other-url")in your theme.
state.router.linkwhen sending pageviews:
tiny-routerexposes a third prop called
autoFetch. This is a setting and, by default, is
true. If it's active, it fetches the data you need each time you navigate to a new route using:
frontity.settings.jsfile to set
falsewhen you want to control the fetching yourself:
statebecause it must be serializable. No circular dependencies are allowed either. The best way to think about it is: it's a JSON.
statewith an async
beforeSSRaction. SSR stands for server-side Rendering. This is usually used to fetch content from the WP REST API.
statein the client using the initial state received from the server. This guarantees that when we render React again we will be in the very same place where we left on the server.
afterCSRaction. CSR stands for client-side Rendering.
frontity.settings.jsand your packages are merged together.
frontity.settings.jsfile gets merged:
beforeSSRto give each package the opportunity to modify the state. For example, the theme could use it to fetch content from the REST API:
sourcewith some data. For example, if the URL is
statemust be serializable and cannot contain functions? Well, that's still technically true, but you can include derived state functions. Let's take a look at an example:
totalCountfield that represents the sum of all the shares we have in our posts. It looks great, but what happens if we update the shares of our second post?
totalCountcould be calculated reactively each time their dependencies change? That's precisely what derived state is for:
state.share.totalCountin React everything will be updated without having to do anything additional on your end.
state.share.totalCountByRoute("/my-first-post"), so you should be able to create derived state for pretty much anything.
stateas well as [
libraries]('./libraries) in your derived state: