riot.update() in v4 [question]

Created on 8 Jul 2019  路  3Comments  路  Source: riot/riot

Hi,

In riot v2/v3, there was a riot.update() which updated all tags. It does not exists in v4, so how to do this ?

PS: i used the riot.update() after login to refresh all tags in my SPA.

question

Most helpful comment

@bufferUnderrun in this v4 there isn't no global riot.update method.
Usually there shouldn't be needed since each component automatically updates it's layout accordingly to it's internal state, you should just update the components state and it's automatically done.

If you need such functionally there are several ways to achieve it, but if there is a root app element which contains all the inner components, you can just use the normal component update flow, where if you call update in the root app element every inner child elements will be also updated, you can read about it in docs.

If this doesn't work for you i would suggest you to use events, you can dispatch an custom update event on the window.document element, and listen to that event in all elements that you need to update, mdn web docs

I've assembled a simple example of using this pattern here

You can check it to see if it fits you needs.

All 3 comments

@bufferUnderrun in this v4 there isn't no global riot.update method.
Usually there shouldn't be needed since each component automatically updates it's layout accordingly to it's internal state, you should just update the components state and it's automatically done.

If you need such functionally there are several ways to achieve it, but if there is a root app element which contains all the inner components, you can just use the normal component update flow, where if you call update in the root app element every inner child elements will be also updated, you can read about it in docs.

If this doesn't work for you i would suggest you to use events, you can dispatch an custom update event on the window.document element, and listen to that event in all elements that you need to update, mdn web docs

I've assembled a simple example of using this pattern here

You can check it to see if it fits you needs.

To add to @hudelgado's comment, you can always create a riot plugin and give components an API to update from anywhere.

riot.plugin((component) => {

    window.addEventListener('customEvent', () => { component.update(); });
    component.updateAll = () => { window.dispatchEvent(new Event('customEvent')); };
})

There's also riot observable which you can still use independently to manage events.

But to his point, if you setup your app right, you don't need to update all components, only relevant ones. Instead, what you want is to tie your components with a state manager of some sort. You can use redux, riot observable as a state manager, or even a stream library (meiosis-js), and run updates whenever actions are called after state the changes.

Thank you both !
I understand better the lack of riot.update() for this v4 and i know how to fix it (replace it) in v2 and so migrating to v4 properly.

Was this page helpful?
0 / 5 - 0 ratings