state
.menu
or settings to define if it should show featured images or not, and then some state that is useful while the app is running, like isMenuOpen
.[[Target]]
:notifications
package wants to add an item to the menu
only when the browser actually supports notifications. That's super easy to do by just using the state
:isMenuOpen
to true
in your frontity.settings.js
file. Yes, I know, that makes no sense, but I hope it gives you a sense of how flexible this pattern is.state
is tiny-router
. It exposes three props:link
represents the current URL of your app and it changes when you use the action actions.router.set("/other-url")
in your theme.state.router.link
when sending pageviews:tiny-router
exposes 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: actions.router.set(link)
.frontity.settings.js
file to set autoFetch
to false
when you want to control the fetching yourself:state
because it must be serializable. No circular dependencies are allowed either. The best way to think about it is: it's a JSON.frontity.settings.js
.frontity.settings.js
.state
with an async beforeSSR
action. SSR stands for server-side Rendering. This is usually used to fetch content from the WP REST API.state
in 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.afterCSR
action. CSR stands for client-side Rendering.frontity.settings.js
and your packages are merged together.my-awesome-theme
, tiny-router
and wp-source
get merged:frontity.settings.js
file gets merged:beforeSSR
to give each package the opportunity to modify the state. For example, the theme could use it to fetch content from the REST API:source
with some data. For example, if the URL is /my-post
:state
must 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:totalCount
field 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?totalCount
could be calculated reactively each time their dependencies change? That's precisely what derived state is for:state.share.totalCount
in 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.state
as well as [libraries
]('./libraries) in your derived state: