title: Using Redux to display a notification in response to a network request
body: <p>My web application uses React and Redux and UIKit.
  It consists of screens A and B.</p>
  
  <p>Screen A contains a button which - upon pressing - will send an asynchronous network request to post some data to a server.</p>
  
  <p>If a user remains on screen A until a response returns from the server, they will receive confirmation about whether or not the request was successful.</p>
  
  <p>The way I have implemented this using React and Redux is by having a component which is responsible for displaying a confirmation banner. This component listens to changes to a state called <code>postStatus</code> in my Redux store. When the user clicks on the button, 3 Redux actions with statuses <code>PENDING</code>, <code>SUCCESS</code> and <code>ERROR</code> are potentially dispatched. After they are dispatched - they are caught by the reducers which change the <code>postStatus</code> state accordingly. This state then gets mapped to my components properties and it is re-rendered to display a relevant banner.</p>
  
  <p>However, if the user does not remain on screen A until a response returns from the server and navigates to screen B instead - I would like a <a href="https://getuikit.com/v2/docs/notify.html" rel="nofollow noreferrer">notification</a> to show up so the user is still aware of the status of the request.</p>
  
  <p>My question is, what would be the most sensible way to implement this behaviour?</p>
  
  <p>Here are a couple of things I can think of:</p>
  
  <ol>
  <li>Create a react component that doesn't actually render anything - it just listens to <code>postState</code> and some extra piece of state that represents which screen the user is on. Implement the <code>componentWillReceiveProps</code> react lifecycle method and if the <code>postState</code> is <code>SUCCESS</code> or <code>ERROR</code> and the other state says that the user is on not on screen A - then call <code>UIKit.notify()</code> to show the notification.</li>
  <li>Call <code>UIKit.notify()</code> when dispatching the <code>SUCCESS</code> or <code>ERROR</code> action if the user is not on screen A.</li>
  <li>Call <code>UIKit.notify()</code> when reducing the state after being dispatched the <code>SUCCESS</code> or <code>ERROR</code> action if the user is not on screen A.</li>
  </ol>
  
  <p>There are most likely a lot of other solutions so I'm keen to hear some.</p>