Hacker News Reader

Comment by Kiro | Hacker News Reader

I would love to hear how people solve the snackbar problem in React. I don't even see how you would solve it with redux since that's just the state.

View on HN

The snackbar problem is actually what redux is built to solve. You would "provide the toast()" function by having components dispatch a "toast" action. From there, your reducer would modify the snackbar state accordingly, e.g. by implementing a stack of toasts, and you would have a single global component render that state into popups.

Yeah. There's a dozen existing "notifications with Redux" libs already: https://github.com/markerikson/redux-ecosystem-links/blob/ma... .

Behavior-wise, it basically just amounts to a pair of SHOW and CLOSE actions, possibly with the reducer tracking an array of open notification entries, and a component that maps over the array and shows an actual notification entry. I glanced at the ones in my list, saw the similarities, and just wrote my own.

in other words, you don't call functions, you send messages.

The specific problem is solved by having the toasts as state and having the Snackbar merely concern itself with presenting that state.

The general problem of shared state is solved with Context (which react-redux uses btw) which is actually quite similar to Angular's DI except it's generally not advertised as something you should use yourself as an application developer (because it's usually too low-level compared to something like react-redux or react-router).

What is the snackbar problem?

See the section in the article with the heading "Dependency Injection". It talks about a specific scenario where there is one component that needs to show the state of the entire system (an activity light turned on, for example), where any component can trigger this, but the last component to become inactive turns the light off.

isn't that Facebook's example for why they made react? the light is the number of notifications/chat messages you have available,and they could never get it to stay consistent?

That was related to the "Flux architecture", I believe - having a "single source of truth" for the data.

Couldn't you just extend the React.Component class with whatever you need, and then use that instead of the base react class? Or am I misunderstanding what react is?

Reply on news.ycombinator.com