Может кто-нибудь объяснить, каков наилучший способ поделиться URL, который может отслеживать состояние Redux?

Question

Мне трудно понять, как сохранить текущее состояние при совместном использовании URL.

У меня есть приложение, созданное с помощью React и Redux.

1. Когда я нажимаю на кнопку, я отправляю действие по обновлению магазина и одновременно меняю маршрут.
2. Обновляется хранилище Redux, а компонент визуализируется с данными из хранилища Redux.
3. Если я хочу поделиться 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 или с помощью параметров соответствия реагирующего маршрутизатора, которые вы здесь делаете. У вас есть доступ к :recid по маршруту match.params.recid.

React docs рекомендует извлекать данные в 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 , но я не думаю, что в этом случае это будет необходимо.