调用传递给Redux子应用程序的回调的最佳方法是什么？

Question

I'm following the Redux "subapp" pattern described here , but I'm having a little trouble figuring out the best way to call callbacks passed into the subapp, especially in response to asynchronous actions.

Here's an inelegant but working solution: https://jsfiddle.net/jochakovsky/bgx86m6j/ . I'm not a big fan of this approach - it forces me to pass the callback further down than I'd like, into ReduxSubappView , which shouldn't have to know anything about that callback. The most natural place to call the callback is the async action creator initialize , but it does not have access to the props passed into ReduxSubApp . Also, it feels weird to compare props and nextProps - presentational components should really only be responsible for converting the current props into a UI, and not have to understand state transitions. Additionally, ReduxSubappView cannot be a pure functional component with this approach.

What's the best way to handle this type of situation?

Answer 1

If you don't want to pass down props from the Subapp root level and you can't use redux in all Subapps, you would need a global pub/sub or something comparable to subscribe to changes.

Here's a native approach with addEventListener :

// in Subapp:
document.addEventListener('initialized', function(e){console.log('app initialized')});

// Wherever the event originates from:
document.dispatchEvent(new Event('initialized'));

A dedicated library might be better, since this has the events bubbling through the DOM (for no reason really), but it should work out of the box.