CODEWITHSUNDEEP
reactjsreduxcomponentscommunication
Amir
Amir

Reputation: 1259

React Redux Components Communication Pattern

I am looking for a good code pattern to allow some communication between components, when using React & Redux.

Most likely this communication should be done via redux, like many articles suggest. (like this one, for example).

However, there are some situations when using the store would be a bit of a hack rather then using it for state management. These special cases are usually when you need to give a command to a component, like show or hide.

I will give an example:

Lets say that we have a <Tooltip /> component which all it does is render some help icon, that when clicked, opens a tooltip popup. And lets say that we have more than one in a page, but we want to make sure that only one is open at a given time. So if tooltip A is open, and the user clicks on tooltip B, then B should open and A should close.

Here are some patterns that I thought might be relevant to implement this requirement:

Using Redux: We could have in the store some state for these tooltips:

{
  showTooltip: "A" // the ID of the tooltip to show
}

This means that we have to connect the tooltips to the redux store, and check for each tooltip if it's ID is the one that should be opened, and when the user clicks on the tooltip icon, we dispatch an action to set the opened tooltip.

Using additional event mechanism: We can use an additional event mechanism to Redux, like emitter.

In this case we can fire an event whenever a tooltip is about to be opened, and all other tooltips can listen and hide themselves once they get such an event.

I have to say that it seems to me that maybe having two event mechanisms in the app seems a bit redundant, but on the other hand, using redux store to communicate with components seems a bit overkill.

Would love to hear some opinions about this issue.

Upvotes: 0

Views: 2156

Answers (1)

markerikson
markerikson

Reputation: 67587

The React and Redux world generally encourages representing your app's behavior as state. For example, rather than an imperative $("#someModal").show() command, you might save a flag value somewhere that says {modalVisible : true}.

There's numerous examples of using state to drive modals and popups. A typical implementation would store the values for a single modal or a list of modals in state somewhere (either in a parent component or in Redux), and then render modal components as appropriate based on those values, such as: {type : "notificationPopup", level : "warning", message : "Something happened!"}. The basic approach works whether you're storing the data in React, Redux, MobX, or something else.

For specific examples, see Dan Abramov's answer to "How can I display a modal dialog in Redux?", Dave Ceddia's article "Modal Dialogs in React", the article "Scalable Modals with React and Redux". I also have other articles that demonstrate modal management in the React Component Patterns#Modal Dialogs and Redux Techniques#UI and Widget Implementations sections of my React/Redux links list.

Upvotes: 2

Related Questions