리듀렉스 및 리액트라우터 동기화 유지

리듀렉스 및 리액트라우터 동기화 유지

리액션 (0.14) + 리듀렉스 (3.3) + 리액션 (4.4) + 리액션 로터 (2.0) 앱을 작업하고 있다.PostsLists블로그 게시물 목록인데Post블로그 포스트를 보여주고Blog다음 구성 요소를 감싸는 기능:

             ┌──────────────────────────────────────────────┐
             │                                              │
             │ ┌─────────────┐┌──────────────────────────┐  │
             │ │             ││                          │  │
             │ │  Post 1     ││ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐  │  │
             │ │  Post 2     ││       Post title         │  │
             │ │  Post 3     ││ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘  │  │
             │ │             ││                          │  │
             │ │             ││ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐  │  │
             │ │             ││                          │  │
             │ │             ││ │                     │  │  │
             │ │             ││      Post contents       │  │
             │ │             ││ │                     │  │  │
             │ │             ││                          │  │
             │ │             ││ │                     │  │  │
             │ │             ││  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─   │  │
             │ │  PostsList  ││          Post            │  │
             │ └─────────────┘└──────────────────────────┘  │
             │                                              │
             │                     Blog                     │
             └──────────────────────────────────────────────┘

지금까지 나의 Redex 상태는 단지 블로그 게시물들의 배열일 뿐이다.

{posts: [{title: 'Post 1', contents: '…'}]}

노선은

/posts
/posts/:id

에서/posts단지PostLists켜져 있는 동안 표시됨/posts/:id Post(의 아이가 될 것임)도 보여진다.Blog) 우편물 목록Link로./posts/:id.

BlogHTTP api가 탑재될 때 블로그 게시물을 가져올 수 있으므로, 예를 들어, 로딩할 경우. /posts/1 Post보여줄 포스트가 있기 전에 장착할 수 있다.

내 질문은 현재의 현직을 관리하는 것이다.아직 꽤 마음에 드는 나의 첫 번째 생각은,current_post해당 주의 필드:

    {posts: [{title: 'Post 1', contents: '…'}],
     current_post: {title: 'Post 1', contents: '…'}}

단, 로딩 등의 경우에는/posts/1, 업데이트를 책임져야 하는 사람current_post(확실하게 하는 방법으로)Post변경 시 다시 로드됨)?만약Post나는 컨테이너를 사용한다.mapStateToProps가지기 위해current_post, 다음에 다시 재조정될 것인가?current_post바뀐건가?

다른 대안은 검사하는 것이다.props.params.id에Post제대로 된 우편물을 찾아냈지만 이건 좀 더러워 보이는군사람들은 보통 어떻게 이런 앱을 만들까?

이와 같은 응용 프로그램의 경우 다음과 같이 환원 저장소를 구성할 것이다.

{posts: [{id: 1, title: 'Post 1', contents: '…'}],
 current_post: {id: 1}}

그PostsList구성 요소가 보관할 책임이 있음current_post최신(즉, 사용자가 항목 중 하나를 클릭하면 해당 항목을 줄이는 작업이 트리거됨)id리듀렉스 스토어에 새로 선택된 포스트의).그Post구성 요소는id현재 게시물에서 관련 데이터를 추출한다.posts배열하여 표시한다.사용자가 현재 게시물을 변경할 때마다 모든 구성 요소가 다시 렌더링되어 전체 화면이 업데이트된다.

props.params를 통해 경로에 기반한 게시 데이터를 로드한 후 다음componentWillReceiveProps. 이렇게 하면 현재 게시물 ID(URL 기반)와 수신 게시물을 비교하고 업데이트해야 할 사항이 있는지 결정할 수 있다.

데이터 검색 작업을 실행 중지할 책임이 있는 구성 요소에 넣으십시오.

이 정보를 상점에 저장할 수도 있지만, 많이 얻을 수 있을지는 잘 모르겠어.상점에서 내비게이션 상태를 관리할 수 있으려면 https://www.npmjs.com/package/redux-react-router을 추천한다.

참조URL: https://stackoverflow.com/questions/35923760/keeping-redux-and-react-router-in-sync