Löschen eines redux Zustand auf Seite Übergang

Question

ich eine Benachrichtigung Zustand wie folgt aus (in redux) zu schaffen,

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

das funktioniert für Ereignisse, die ich weiß, zu steuern. Aber wo sollte ich das Clearing (PURGE_NOTIF) implementieren, wenn ich auf Seiten umblättere, zB von der Anmeldung zur Startseite? Ich möchte kein componentWillMount (und ich glaube nicht, dass das der Schreibweise ist) auf jeder Komponente schreiben, um die notifState zu löschen. Sollte das irgendwo auf den Routen sein? Ich benutze React-Router BTW.

UPDATE mit Antwort

Mein neues Minderer wie folgt aussieht, wo ich ein displayed boolean

hinzugefügt

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

und in meinem Klienten ist, wo ich überprüfen, ob es bereits oder nicht und Griff in geeigneter Weise angezeigt ist schon .

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

Wenn Sie definieren Ihr Reagieren Router Routen Ebene Routenobjekte mit, können Sie Lifecycle Ereignisse auf Ihrer Route definieren. Der einfachste Weg, um das zu erreichen, was Sie beschrieben haben, ist die Angabe onLeave auf der Route.

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

Sie müssen einen Verweis auf store auf Ihre routes zu übergeben. Hier ist eine mögliche Lösung:

// 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}, 
    ]} 
) 
}