使用 React Router Redux 在两个互斥的 React 视图之间导航

Question

我有 2 个相互排斥的视图，它们都依赖于某些 state。

当事件发生时，我需要使用 react-router-redux 从 View1 切换到 View2，方法是推送一条新路线。我还需要将 state 更新为 View2 数据所需，例如：

push('route-to-view2');
store.dispatch({type: 'state-for-view-2-received', payload: 'state-for-
view-2'});

问题是这两个更新不是自动发生的。因此，在路由被推送之后，但在状态被发送之前的片刻，当显示 View2 时没有状态（或者在我的情况下显示错误）。

如果我像这样更改顺序：

store.dispatch({type: 'state-for-view-2-received', payload: 'state-for-view-2'});
push('route-to-view2');

出现同样的问题，因为 View1 不适用于 View2 的状态。

因此在这两种情况下，导航发生时都可能出现小的闪烁。

有没有办法避免这个问题。

Answer 1

您可以使用 react-batch-enhancer。只有当所有的动作都被 reducer 处理时，它才会批处理动作并触发来自商店的通知以做出反应。

import { batchActions } from 'redux-batch-enhancer';

dispatch(batchActions([
  store.dispatch({type: 'state-for-view-2-received', payload: 'state-for-view-2'}),
  push('route-to-view2');
]));

使用 React Router Redux 在两个互斥的 React 视图之间导航

Navigation between two mutually exclusive React views with React Router Redux

reactjs

redux

react-redux

react-router-redux