Redux 상태 및 URL 쿼리 매개 변수를 동기화하는 방법

Redux 상태 및 URL 쿼리 매개 변수를 동기화하는 방법

---

검색 패널이있는 웹 페이지가 있습니다. 검색 패널에는 id, size, ... 등 여러 입력 필드가 있습니다.

내가 원하는 것은 사용자가 검색 값 (예 : id = 123 및 size = 45)을 설정하고 검색 버튼을 누를 때입니다.

1. Redux 감속기의 searchState를 새 검색 값 (id = 123 및 size = 45)으로 업데이트해야합니다.
2. URL은 " http : // mydomain / home? id = 123 & size = 45 " 로 변경해야합니다 .

반면에 사용자가 URL을 http : // mydomain / home? id = 111 & size = 22로 변경 하면 :

1. 감속기의 searchState는 새 검색 값 (id = 111 및 size = 22)으로 변경해야합니다.
2. UI 검색 패널 입력을 새 값 (id = 111 및 크기 = 22)으로 업데이트해야합니다.

목표를 달성하는 방법? 어떤 라우터를 사용해야합니까 (react-router, redux-router, react-router-redux 및 기타)?

---

React Router를 직접 사용 하고 Redux에 유지 하지 않는 것이 좋습니다 searchState. React Router는 URL 매개 변수를 컴포넌트에 삽입하고이를 사용 mapStateToProps(state, ownProps)하여 최종 소품을 계산할 수 있습니다 .

정말로 경로 변경을 작업으로보고 싶다면, 양방향 동기화를 위해 react-router-redux 를 사용할 수 있지만, 상태의 매개 변수는 제공하지 않고 현재 위치 만 제공합니다. 조치를 기록 및 재생하고이를 재생할 때 URL 표시 줄을 업데이트하려는 경우 유일한 사용 사례입니다.

절대 필요하지 않습니다. 대부분의 경우 React Router를 직접 사용하는 것으로 충분합니다.

---

간단히 말해서 redux-query-sync 를 사용 하여 스토어의 URL 매개 변수와 필드를 동기화 상태 로 유지할 수 있습니다 . 라우터없이 작동합니다.

---

더 긴 이야기 : 같은 질문으로 어려움을 겪으면서 저는 Dan Abramov의 답변에 감사를 표하며 URL을 Redux 스토어 외부의 애플리케이션 상태의 일부인 '두 번째 스토어'로 간주 할 것을 제안했습니다. 그러나 두 종류의 '저장소'가 있으면 코드를 수정하기가 어렵다는 것을 발견했습니다. 예를 들어 각 '저장소'는 서로 다른 인터페이스를 가지고 있기 때문입니다. 개발자로서 저는 Redux 상태의 필드 중 하나를 선택 하고 위치가 내 상태 (의 일부)에 대한 작은 창인 것처럼 URL에 노출 하고 싶습니다.

따라서 방금 redux-query-sync를 게시하여 상태에서 값을 선택하는 선택기 기능을 제공 한 다음 지정한 매개 변수 이름의 창 위치에 노출됩니다. 또한 URL에서 Redux 상태로 (예 : 애플리케이션이 처음로드 될 때) 다른 방향으로 동기화되도록하려면 매개 변수 값을 전달할 액션 생성자를 제공하여 감속기가 그에 따라 상태를 업데이트 할 수 있도록합니다.

---

첫 번째 시나리오를 처리하는 방법은 다음과 같습니다.

• 입력 값이 변경되면 해당 구성 요소가 해당 컨테이너에서 소품으로 전달 된 콜백을 트리거합니다.

• 콜백에서 컨테이너는 이벤트가 발생할 때 Redux 상태를 업데이트하는 작업을 전달합니다.

• 작업 호출 바로 다음 줄 this.context.router.push()에서 올바른 쿼리 문자열과 함께 URL을 사용 하고 전달합니다.

이것이 올바른 접근 방식인지 확실하지 않습니다. 내 의견으로는 쿼리 문자열이 마스터가 아닌 상태를 반영해야하기 때문에 URL을 먼저 업데이트하는 것이 더 바람직하다는 것을 알았습니다.

반대 시나리오에 관해서는 정말 잘 모르겠습니다. URL을 수동으로 설정하면 전체 재로드가 트리거되는 것처럼 보이지만 착각 할 수 있습니다.

사용할 라우터는 React Router를 단독으로 사용하고 있습니다. 나는 다른 사람들을 사용하는 데있어서 가치를 찾지 못했고이 토론 은 저에게 결정적인 역할을했습니다.

---

나는 최근 이와 유사한 문제에 대한 작업을 마쳤습니다. MobX를 내 저장소로 사용하고 redux-router를 라우터로 사용했습니다. (나는 react-router로 잘했지만 컴포넌트 외부에서 push 액션을 전달해야했습니다. redux는 글로벌 스토어가 여기에서 훌륭하게 작동합니다)

내 솔루션은 cantera가 설명한 것과 유사했습니다. 내 라우터 상태는 단순히 양식 상태를 반영한 ​​것입니다. 이것은 내 양식 상태를 버리지 않고 라우터 상태에 전적으로 의존 할 필요가 없다는 추가 보너스가 있습니다.

---

첫 번째 시나리오에서

1) 평소와 같이 양식 입력을 업데이트하여 결과 구성 요소에서 다시 렌더링을 트리거합니다.

2) componentDidUpdate()결과 구성 요소에서 양식 props를 사용하여 업데이트 된 쿼리 문자열을 구성합니다.

3) 업데이트 된 쿼리 문자열을 라우터 상태로 푸시합니다. 이는 순전히 URL 업데이트 효과를위한 것입니다.

---

두 번째 시나리오의 경우

1) onEnter루트 Route구성 요소 의 후크에서 사용 가능한 쿼리 문자열을 가져 와서 초기 양식 값으로 구문 분석합니다.

2) 내 상점을 값으로 업데이트합니다. 이것은 페이지 의 첫로드 에만 해당되며 라우터 상태가 양식 상태를 나타내는 유일한 시간입니다.

---

편집 : URL이 상태를 업데이트하지 않기 때문에이 솔루션은 브라우저 기록으로 돌아갈 때의 경우를 고려하지 않습니다.

---

나는 그 동기화를 아주 간단하게 할 새로운 도구 react-url-query 를 추천합니다 .

참고 URL : https://stackoverflow.com/questions/36596996/how-to-sync-redux-state-and-url-query-params