Як синхронізувати параметри стану Redux та url хеш-тегів

Question 1

У нас є список лекцій та розділів, де користувач може їх вибрати та скасувати вибір. Два списки зберігаються у сховищі redux. Тепер ми хочемо зберегти подання вибраних лекцій-пульсів та шлейфів розділів у хеш-тезі URL-адреси, і будь-які зміни в URL-адресі також повинні змінити сховище (двостороння синхронізація).

Що було б найкращим рішенням за допомогою реакції-маршрутизатора або навіть реакції-маршрутизатора-відновлення ?

Насправді ми не змогли знайти кілька хороших прикладів, коли маршрутизатор реакцій використовується лише для підтримки хеш-тегу URL-адреси, а також оновлює лише один компонент.

Question 2

Думаю, вам не потрібно.
(Вибачте за зневажливу відповідь, але це найкраще рішення з мого досвіду.)

Store - це джерело правди для ваших даних. Це добре.
Якщо ви використовуєте React Router, нехай це буде джерелом правди для вашого стану URL.
Не обов’язково тримати все в магазині.

Наприклад, враховуючи ваш варіант використання:

Оскільки параметри url містять лише шматки лекцій та вибрані глави. У магазині я маю перелік лекцій та розділів з іменем, кулями та вибраним булевим значенням.

Проблема в тому, що ви дублюєте дані. Дані в store ( chapter.selected) дублюються в стані React Router. Одним із варіантів буде їх синхронізація, але це швидко ускладнюється. Чому б просто не дозволити React Router стати джерелом істини для вибраних глав?

Тоді стан вашого магазину виглядатиме (спрощеним):

{
  // Might be paginated, kept inside a "book", etc:
  visibleChapterSlugs: ['intro', 'wow', 'ending'],

  // A simple ID dictionary:
  chaptersBySlug: {
    'intro': {
      slug: 'intro',
      title: 'Introduction'
    },
    'wow': {
      slug: 'wow',
      title: 'All the things'
    },
    'ending': {
      slug: 'ending',
      title: 'The End!'
    }
  }
}

Це воно! Не зберігайте selectedтам. Натомість нехай React Router це обробляє. У своєму обробнику маршруту напишіть щось на зразок

function ChapterList({ chapters }) {
  return (
    <div>
      {chapters.map(chapter => <Chapter chapter={chapter} key={chapter.slug} />)}
    </div>
  )
}

const mapStateToProps = (state, ownProps) => {
  // Use props injected by React Router:
  const selectedSlugs = ownProps.params.selectedSlugs.split(';')

  // Use both state and this information to generate final props:
  const chapters = state.visibleChapterSlugs.map(slug => {
    return Object.assign({
      isSelected: selectedSlugs.indexOf(slug) > -1,
    }, state.chaptersBySlug[slug])
  })

  return { chapters }
}

export default connect(mapStateToProps)(ChapterList)

Question 3

react-router-redux може допомогти вам ввести URL-адресу для зберігання, тому кожен раз, коли міняється тег хешу, зберігайте також.