How to make the differents fragments communicate together

[othke]

Hi,

I would like to know what is the best solution to make those fragments communicate with each other ?
If we think to the basic Flux problematic, let says we want that a new message in Chat Fragment display a notification into the Header fragment.
I think I would use a state management like Redux but I don't understand how to setup this with Tailor.

Because each React components are mounted independently, I don't understand how could I nested them into a Redux Provider ?

Thanks for your recommendations 😃

[waytoharish]

I also have similar question.How state of one Fragment passed to Another Fragment with React and Redux

[shilangyu]

You shouldn't be passing full states between fragments. Fragments should know as little as possible about other ones. For communication you use vanilla CustomEvents or some sort of an event bus

[waytoharish]

Hi
Please can you share some example.In Our case we have root app which passing all states to child modules using redux.Another question I want to know can be still use redux to maintain the state at global level??

[waytoharish]

This is very urgent as we are planning to offer your dream work to the clients

[shilangyu]

i have done an app using tailor with react-redux fragments (sadly i cant open source it). Heres how it works: Each of your fragment has its own store, it is not shared across other fragments. The idea of microfrontends (fragments) is for them to be as self-sufficient as possible. Let's assume you choose vanilla CustomEvents:

somewhere in header fragment:

// add an event listener
window.addEventListener('addToCart', e => addToCart(e.detail)) // all the sent data will be in the detail property

addToCart here could be an action dispatcher

somewhere in shop fragment:

let sendItemInfo = new CustomEvent('addToCart', {
  detail: {
    id: 123
  }
})
window.dispatchEvent(sendItemInfo)

Above could be a reducer

Remember that once tailor assembles your fragments they all share the window object, meaning you can communicate through it

[waytoharish]

So we have to emit the event from heder and capture in individual fragment??

[shilangyu]

Yep, whoever will need emited data can just create a event listener

[armand1m]

I changed the code in this repo in order to show how to communicate and react to changes on each Fragment as detailed by @shilangyu in the #11 PR =)

I will probably add an example of server-side rendering with this in mind as well

[SathishKumar140]

Yep, whoever will need emited data can just create a event listener

Let's say, I have created a custom event and made it communicated. Is it secure? If anyone ( Unknow user ) manually triggers a custom event from the console (Chrome debugging console / Snippets) it will spoil the application security, right?

[armand1m]

it depends on which kind of operations you're relying your events on IMO

[shilangyu]

@SathishKumar140 well we are talking about front-end after all, things are exposed to the user and they can be easily intercepted. So yes it's not 'secure' however sensitive information shouldn't be passed anyways, just logic

[SathishKumar140]

@SathishKumar140 well we are talking about front-end, after all, things are exposed to the user and they can be easily intercepted. So yes it's not 'secure' however sensitive information shouldn't be passed anyways, just logic

Please refer - zalando/tailor#142 (comment)

Basically, all I need to know is there any secured way can communicate between two micro-apps.