title: Clear one redux state on page transition
body: <p>I'm creating a notification state like this (in redux),</p>
  
  <pre><code>import { STORE_NOTIF, PURGE_NOTIF } from '../actions/notif';
  
  const defaultState = {
    kind: null,
    message: null
  }
  
  export default function notifReducer(state = defaultState, action) {
    switch(action.type) {
    case STORE_NOTIF:
      return {kind: action.kind, message: action.message};
    case PURGE_NOTIF:
      return defaultState;
    default:
      return state;
    }
  }
  </code></pre>
  
  <p>this works for events I know to control. But where should I implement the clearing (PURGE_NOTIF) for when I transition to pages, say from sign-in to home page? I don't want to write a <code>componentWillMount</code> (and I don't think that's the write way) on every component to clear the <code>notifState</code>. Should this be like somewhere in the routes? I use react-router BTW.</p>
  
  <p><strong>UPDATE</strong> with answer</p>
  
  <p>My new reducer looks like this where I added a <code>displayed</code> boolean</p>
  
  <pre><code>import _ from 'lodash';
  
  import { STORE_NOTIF, PURGE_NOTIF, DISPLAY_NOTIF } from '../actions/notif';
  
  const defaultState = {
    kind: null,
    message: null,
    displayed: true
  }
  
  export default function notifReducer(state = defaultState, action) {
    switch(action.type) {
    case STORE_NOTIF:
      return _.merge({}, state, { kind: action.kind, message: action.message, displayed: action.displayImmediately });
    case DISPLAY_NOTIF:
      return _.merge({}, state, { displayed: true });
    case PURGE_NOTIF:
      return defaultState;
    default:
      return state;
    }
  }
  </code></pre>
  
  <p>and in my client is where I check if it's been displayed already or not and handle appropriately.</p>
  
  <pre><code>const scrollTop = () =&gt; { window.scrollTo(0, 0) }
  const handleNotifs = (store) =&gt; {
    const notifState = store.getState().notifState;
  
    if (notifState.message) {
      if (notifState.displayed) {
        store.dispatch({type: PURGE_NOTIF});
      } else {
        store.dispatch({type: DISPLAY_NOTIF});
      }
    }
  }
  
  const store = applyMiddleware(...middlewares)(createStore)(reducer, initialState);
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;Router onUpdate={() =&gt; {scrollTop(); handleNotifs(store)}} routes={routes} history={browserHistory} /&gt;
    &lt;/Provider&gt;,
    document.getElementById('app')
  );
  </code></pre>