Redux 상태 및 URL 해시 태그 매개 변수를 동기화하는 방법

Redux 상태 및 URL 해시 태그 매개 변수를 동기화하는 방법

---

사용자가 선택 및 선택 해제 할 수있는 강의 및 장 목록이 있습니다. 두 목록은 redux 저장소에 저장됩니다. 이제 우리는 URL의 해시 태그에 선택된 강의 슬러그와 챕터 슬러그의 표현을 유지하고 URL을 변경하면 저장소도 변경됩니다 (양방향 동기화).

react-router 또는 react-router-redux를 사용하는 가장 좋은 솔루션은 무엇입니까 ?

반응 라우터가 URL의 해시 태그를 유지하고 하나의 구성 요소 만 업데이트하는 데만 사용되는 좋은 예를 실제로 찾을 수 없습니다.

감사!!!

---

그럴 필요가 없다고 생각합니다.
(거부적인 답변에 대해 죄송하지만 내 경험상 최고의 솔루션입니다.)

저장소는 데이터에 대한 진실의 원천입니다. 이건 괜찮아.
React Router를 사용하는 경우 URL 상태에 대한 진실의 소스가되도록하십시오.
상점에 모든 것을 보관할 필요는 없습니다.

예를 들어 사용 사례를 고려하면 다음과 같습니다.

URL 매개 변수에는 선택한 강의와 장의 슬러그 만 포함되기 때문입니다. 상점에는 이름, 슬러그 및 선택된 부울 값이있는 강의 및 장 목록이 있습니다.

문제는 데이터를 복제하고 있다는 것입니다. 저장소 ( 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)

---

react-router-redux 저장할 URL 항목을 삽입하는 데 도움이 될 수 있으므로 해시 태그가 변경 될 때마다 저장하십시오.

참고 URL : https://stackoverflow.com/questions/36722584/how-to-sync-redux-state-and-url-hash-tag-params