Cách đồng bộ trạng thái Redux và thông số thẻ băm url

Chúng tôi có một danh sách các bài giảng và chương để người dùng có thể chọn và bỏ chọn chúng. Hai danh sách được lưu trữ trong một cửa hàng redux. Bây giờ chúng tôi muốn giữ một bản đại diện của các sên bài giảng và sên chương đã chọn trong thẻ băm của url và bất kỳ thay đổi nào đối với url cũng nên thay đổi cửa hàng (đồng bộ hai chiều).

Giải pháp tốt nhất sử dụng react-router hoặc thậm chí react-router-redux sẽ là gì?

Chúng tôi thực sự không thể tìm thấy một số ví dụ tốt trong đó bộ định tuyến phản ứng chỉ được sử dụng để duy trì thẻ băm của một url và cũng chỉ cập nhật một thành phần.

Tôi nghĩ bạn không cần phải làm vậy.
(Xin lỗi vì một câu trả lời phiến diện nhưng đó là giải pháp tốt nhất theo kinh nghiệm của tôi.)

Lưu trữ là nguồn trung thực cho dữ liệu của bạn. Điều này là tốt.
Nếu bạn sử dụng React Router, hãy để nó là nguồn trung thực cho trạng thái URL của bạn.
Bạn không cần phải giữ mọi thứ trong cửa hàng.

Ví dụ: xem xét trường hợp sử dụng của bạn:

Bởi vì các tham số url chỉ chứa các slugs của bài giảng và các chương được chọn. Trong cửa hàng, tôi có một danh sách các bài giảng và chương với tên, slug và giá trị Boolean đã chọn.

Vấn đề là bạn đang sao chép dữ liệu. Dữ liệu trong store ( chapter.selected) được sao chép ở trạng thái React Router. Một giải pháp sẽ là đồng bộ hóa chúng, nhưng điều này nhanh chóng trở nên phức tạp. Tại sao không để React Router là nguồn chân lý cho các chương đã chọn?

Trạng thái cửa hàng của bạn sau đó sẽ trông giống như (đơn giản hóa):

{
  // 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!'
    }
  }
}

Đó là nó! Đừng lưu trữ selectedở đó. Thay vào đó, hãy để React Router xử lý nó. Trong trình xử lý tuyến đường của bạn, hãy viết một cái gì đó như

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)

react-router-redux có thể giúp bạn nhập nội dung url để lưu trữ, vì vậy mỗi khi thẻ băm thay đổi, hãy lưu trữ luôn.