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

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

사용자가 선택/해제할 수 있는 강의와 챕터 목록이 있습니다.2개의 리스트는 레독스스토어에 저장됩니다.이제 선택한 강의 슬래그와 챕터 슬래그의 표현을 URL 해시 태그에 유지하고 URL을 변경하면 스토어도 변경됩니다(양방향 동기화).

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

리액트 라우터가 URL의 해시 태그를 유지하기 위해서만 사용되고 컴포넌트가 1개만 갱신되는 좋은 예를 찾을 수 없었습니다.

그럴 필요 없을 것 같아요.
(답변을 무시해서 죄송하지만 제 경험상 가장 좋은 해결책입니다.)

Store는 데이터에 대한 진실의 원천입니다.이거 괜찮네요.
리액트 라우터를 사용하는 경우는, 그것이 URL 상태의 진실원이 되도록 해 주세요.
당신은 가게에 모든 것을 보관할 필요는 없어요.

예를 들어, 사용 사례를 고려해 보겠습니다.

url 파라미터에는 선택한 강의와 장의 슬러그만 포함되어 있기 때문입니다.가게에는 이름, slug, 선택된 부울값과 함께 강의와 챕터 목록이 있습니다.

문제는 네가 데이터를 복제하고 있다는 거야.스토어의 데이터(chapter.selected)는 리액트라우터 상태에서 복제됩니다.하나의 솔루션은 이들을 동기화하는 것이지만, 이는 빠르게 복잡해집니다.왜 리액트 라우터가 일부 장에 대한 진실의 원천이 되지 않는가?

스토어 상태는 다음과 같습니다(간단화).

{
  // 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대신 리액트 라우터가 처리하도록 해루트 핸들러에 다음과 같이 입력합니다.

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