Очистить состояние один перевождь на переходе странице

Question

Я создаю состояние уведомления, как это (в Redux),

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; 
    } 
} 

это работает для событий, которых я знаю, чтобы контролировать. Но где я должен выполнить очистку (PURGE_NOTIF), когда я перехожу на страницы, скажем, от входа на домашнюю страницу? Я не хочу писать componentWillMount (и я не думаю, что это путь записи) для каждого компонента, чтобы очистить notifState. Должно ли это быть где-то на маршрутах? Я использую call-router BTW.

UPDATE с ответом

Мой новый редуктор выглядит так, где я добавил displayed булево

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; 
    } 
} 

и мой клиент, где я могу проверить, было ли это отображается уже или нет, и обращаться с соответствующим ,

const scrollTop =() => { window.scrollTo(0, 0) } 
const handleNotifs = (store) => { 
    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(
    <Provider store={store}> 
    <Router onUpdate={() => {scrollTop(); handleNotifs(store)}} routes={routes} history={browserHistory} /> 
    </Provider>, 
    document.getElementById('app') 
); 

Answer 1

Если вы определяете Реагировать маршрутов маршрутизатора, используя простой маршрут объекты, вы можете определить жизненный цикл событий на маршруте. Самый простой способ добиться того, что вы описали, - указать маршрут onLeave.

const onLeave =() => store.dispatch({type: "PURGE_NOTIF"}) 
const routes = (
    {path: "/login", component: LoginPage, onLeave} 
) 

Вы должны передать ссылку на store ваши routes. Вот возможное решение:

// index.js 
const store = createStore(/* ... */) 
const routes = createRoutes(store) 

ReactDOM.render(
    <Provider store={store}> 
    <Router routes={routes} /> 
    </Provider> 
) 

// createRoutes.js 
export default store => { 
    const purge =() => store.dispatch({type: "PURGE_NOTIF"}) 

    return (
    {path: "/", component: Application, childRoutes: [ 
     {path: "login", component: LoginPage, onLeave: purge}, 
     {path: "dashboard", component: Dashboard}, 
    ]} 
) 
}