Question

我很难理解共享URL时如何保持当前状态。

我有一个使用React和Redux制作的应用程序。

当我单击一个按钮时，我正在调度一个操作以更新商店，并且同时更改了路线。
Redux存储得到更新，并且组件使用Redux存储中的数据进行呈现。
如果我想与具有相同应用程序的人共享URL，则该人没有更新商店，因此不会呈现任何内容。

我试图总结代码：

on route: /
  <Home>
    <BookList data={featured} />
    <BookList data={top} />
  </Home>

on route: /record/:recid
  <BookDetails>
    <BookInfo />
    <BookList data={suggested}/>
  </BookDetails>    

BookList is a reusable component:
<BookList>
  <BookItem onCLick={goToDetailsPage}/>
  <BookItem />
  <BookItem />
  <BookItem />
</BookList>

如何解决此问题？

感谢您提供的所有帮助！

Answer 1

为了将正确的状态加载到模型视图（书本），您需要有权访问必要的变量。实现此目的的两种简单方法是通过url参数?recid=12或使用react-router的match参数，您将在此处进行操作。您可以通过路由:recid访问match.params.recid。

反应文档建议在componentDidMount()中获取数据，但是在更新路径时，在componentDidUpdate()中获取新数据没有任何问题。请记住要跟踪获取状态，因此不要进行多个api调用。淡化版本可能看起来像这样：

class BookModel extends Component {
  constructor {...}

  componentDidMount() {
    const { dispatch, match } = this.props;
    const { recid } = match.params;

    dispatch(someFetchAction("book", recid));
  }

  componentDidUpdate(prevProps) {
    const { dispatch, fetching, match } = this.props;
    const oldBook = prevProps.match.params.recid;
    const newBook = match.params.recid;
    const didUpdate = oldBook !== newBook;

    //fetch new record if not already fetching and record id has changed
    !fetching && didUpdate && dispatch(someFetchAction("book", newBook));
  }

  render() {...}
}

export default connect((store, props) => ({
  bookModels: store.bookModels,
  fetching: store.fetching
}))(BookModel);

如果遇到更新未解决的问题，则可能需要添加withRouter，但我认为在这种情况下没有必要。

有人可以解释什么是共享可以跟踪Redux状态的URL的最佳方法吗？

1 个答案: