CODEWITHSUNDEEP
reactjsreduxreact-redux
medihack
medihack

Reputation: 16627

Single event in React Redux app that integrates legacy library

I have a React app using Redux to handle the overall state of the app that also integrates some legacy Javascript library to present a specific viewer (on a canvas). The legacy library manages for the viewer its own state (and I don't have access to it). I now have the case that one of my components need to trigger an event on the viewer in another component (e.g. reset the viewer using the legacy library).

I can think of two solutions:

  1. Do a Redux state change (e.g. {reset: true}) that is provided to the viewer component via props. And after the viewer component reseted the viewer, it directly resets the state itself (e.g. `{reset: false}).
  2. Bypass Redux and use some kind of PubSub pattern for those components to communicate directly to each other without any Redux state change.

Is there recommended way? What are the advantages/disadvantages? One downside of option 1 seems that it triggers a re-render when the state is updated the second time ({reset: false}).

Upvotes: 0

Views: 157

Answers (1)

Chromonav
Chromonav

Reputation: 773

Another way i have come up is by specifying the time at which it got reset. If the time changes this will trigger a re-render.

on dispatch(reset())

Action:

reset(){
  return({
   type:constant.RE_RENDER,
   payload: new Date().getTime()
  })
}

STORE:

if(state.reset < action.payload){
  return {
   reset: action.payload
  }
}

The view will get updated only once. Using another pub-sub system will add undue complications and bypassing redux pattern is not recommended.

Upvotes: 1

Related Questions