0

I have currently an issue of which I am unsure if I am just not seeing the bigger picture (or possibly not do this at all) or if this is valid in redux...

I have an SVG chart with a fixed size. It can happen that the user opens a panel on my page which will reduce the width of the chart. This leads to my chart looking compressed. To fix this the chart should rerender with updated dimensions so everything looks good again.

So... I have a component that the user clicks in order to open the panel. That component should trigger an action, ideally something general and reusable like "rerenderSVG". I could use the standard redux workflow and have my reducer put some flag in my state and have all my svg-related components listen to that. But that feels like overkill. This is nothing I want in my state, I only want an action that is broadcast to all my mounted components, like "hey, components, this just happened, if this concerns you: please react".

This can be easily done in flux, but in redux... I don't know. Can this pattern be implemented and still be in accordance with the redux way?

And if this problem is so mundane that there are already thousands of posts on this: Sorry! But I didn't really know for which keywords to look...

hurrtz
  • 1,871
  • 1
  • 19
  • 34

2 Answers2

0

All actions are broadcast to all reducers by default in flux/redux. You need to handle that particular action in each of the reducers where you want that state to be updated.

If you dont want to update all the components and just update the component that is currently being displayed you could just use setState to re-render that specific component.

agenthunt
  • 8,450
  • 3
  • 30
  • 26
  • Please correct me if I am wrong but isn't the reducer the wrong place for my issue? Like I said: I don't want to change my state. I want an action to be dispatched/broadcast into a component. All the reducer could do is adding a flag to my app state so that my components can listen for that. ...the more I think about it the more I get the feeling that this can't be done in redux, but I wanted to ask anyway... – hurrtz Jul 17 '17 at 12:15
  • If It is only one component that needs to aware of the new reduced size, then probably reducer is not a good place. If it is multiple components that needs to be aware of new reduced size, then probably yes. I suppose in flux you subscribe directly in the component and use setState to trigger a rerender and not save it in store. Yes. in that sense you are right, there is no way to get the component notified without actually changing the state in redux. You could probably write a redux middleware but I dont think that is a good solution for this use case. – agenthunt Jul 17 '17 at 12:46
0

If I got what you meant correctly, so I don't think that you need redux for that purpose at all. What are you looking for is a local state of the parent (usually container) component.

Why just don't keep in the redux store the raw data which is required for chart to render its content (coordinates/datasets for graphs/etc..), but don't put any flags or whatever data related to change of height/width of charts box. Since redux store stores the raw data itself, the shape of your data should be a deal of local state of your connected container component. And once the data is "shaped" for resized view you can pass it down to your "dummy" presentational components via props where this data will be depicted. I assume you know well the difference between smart/dumb or container/presentational components.

Once your user somehow (deliberately or accidentally) change the size of the chart box, you can handle this resize event and run a function (e.g. rerenderCharts) that recalculates the shape of your data and call setState on the component. That would lead all the chain of your components to be rerendered whenever the size of the container was changed.

Here you can see some examples how to handle resize event on the component level.

Hope it all make sense.

Artyom Pranovich
  • 6,814
  • 8
  • 41
  • 60