Include AJAX-fetched data in page title?

• /: Products listing. Clicking on a product takes you to for instance /product/12.
• /product/:id: Product detail page.

On the start page I want the page title (document.title) to be: “MyStore”. Easy enough.

On the product page the page title should be for instance: “Rolex watch – Mystore”. When this page is entered, I fetch the product details with AJAX (from /api/v1/products/12 for instance). When the request is done I have access to the product name (“Rolex watch”) and want to put that in the page title. However, redux-first-router seems to only update the page title when the current location changes, not when arbitrary state updates.

Am I missing something?

Just tell me if you need more details 😃

[faceyspacey]

That’s the most common use case and all many people need

[faceyspacey]

that’s a fine solution. you can also set document.title manually any time you want on the client, if you want to avoid a large dependency just for a one liner. …for SSR, it’s just a matter of grabbing state.title and putting it in the HTML you spit out. since this isn’t dependent on RFR updating the browser’s document.title when used on the server, state.title will work fine. Essentially you’re using Helmet now just for the client side aspect.

Here’s another way you might like:

let currentTitle = store.getState().title

store.subscribe(() => {
   if (currentTitle !== store.getState().title) {
      document.title = currentTitle = store.getState().title
   }
})

// and:

title: isClient() ? () => undefined : 'title'

that way it still works as expected on the server, and on the client you update the title on every single title change automatically. no extra libs needed. very few extra lines of code.