使用 react、react-router 和 redux 实现面包屑

Question

>我在下面设计了动作和减速器：

// Action Types
const PUSH_BREADCRUMB = 'PUSH_BREADCRUMB';
const POP_BREADCRUMB = 'POP_BREADCRUMB';
// ActionCreator
const pushBreadcrumb = (payload: { text, link }) => ({
  type: PUSH_BREADCRUMB,
  payload
});
const popBreadcrumb = () => ({ type: PUSH_BREADCRUMB });
// Reducer
const initState = [
  { text: 'Home', link: '/' }
];
const breadcumbsReducer = (state = initState, action) => {
  switch (action.type) {
    case PUSH_BREADCRUMB:
      return [...state, action.payload];
    case POP_BREADCRUMB:
      return state.slice(0, state.length - 1);
    default:
      return state
  };
};

下面是我的组件和路由器： //...导入一些组件

// ...connect and map breadcrumbs
const Header = ({ breadcrumbs }) => {
  return (
    <ul>
      {breadcrumbs.map({ item, link } =>
        <li key={link}><Link to={link}>{text}</Link></li>
      )}
    </ul>
  );
};
ReactDOM.render(
  <Provider>
    <Router>
      <AppContainer>
        <Header />
        <Route exact path='/orders' component={OrderListContainer} />
        <Route path='/orders/:id' component={OrderDetailContainer} />
      </AppContainer>
    </Router>
  </Provider>,
  document.getElementById('root')
);

然后：

• OrderListContainer#componenetWillMount和OrderDetailContainer#componenetWillMount调度pushBreadcrumb

• OrderListContainer#componentWillUnmount和OrderDetailContainer#componentWillUnmount调度popBreadcrumb。

例外的面包屑是Home > Orders > Detail;

但是当我留在/orders/:id刷新页面时，它会Home > Detail.

有没有更好的方法来实现 redux 面包屑？

Answer 1

发生这种情况是因为刷新后状态被重置。您可以尝试使用持久存储实现您的解决方案 - 这会将选定的状态键保留到浏览器 localStorage。