reactjs - 在页面转换时清除一个 redux 状态

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。这应该像 route 的某个地方吗？我使用 react 路由器顺便说一句。

更新回答

我的新 reducer 看起来像这样，我在其中添加了一个 displayed bool 值

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

如果您使用普通路由对象定义您的 React Router 路由，您可以在您的路由上定义生命周期事件。实现您所描述的最简单方法是在路线上指定 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},
    ]}
  )
}