React-Router & Redux를 사용할 때 링크를 클릭 할 때 작업을 전달하는 방법은 무엇입니까?

Question

Link을 사용하면 목록 항목을 추가/편집하기위한 페이지로 나를 보냅니다.

실제로 Link을 클릭하면 실제로 Redux 저장소를 업데이트하여 실제로 해당 페이지로 리디렉션되기 전에 Redux 작업을 디스패치합니까?

예 : 편집 버튼 -> 조치가 발송 됨 -> 상점 업데이트 됨, {'state': 'edit-mode'} -> 리디렉션으로 진행합니다.

아니면 내가하려는 일을 성취하기 위해 다른 방법이 있습니까?

구성 요소가 마운트되었을 때 특정 조건에 따라 stateToEdit과 같은 동작을 실행하겠습니까? 그렇다면 내게 당신의 방식을 보여주십시오. 감사합니다.

추 신 : 모든 추가/수정/삭제에 하나의 구성 요소 만 사용하고 있습니다. 그래서이 방법을 생각하고하는 것은 다음이 문제 해결에 대해 갈 수있는 몇 가지 방법의

Answer 1

등 edit-mode 또는 delete-mode에 대한 여부를 state에 따라 렌더링하는 대신 Link를 사용

1. 는, onClick 기능이있는 browserHistory.push(path)을 사용해보십시오.
   • onClick 안에는 dispatch 조치를 취한 다음 새 위치에 push을 입력 할 수 있습니다.
   • 그러나 다양한 구성 요소에서이 일련의 작업을 수행하려는 경우 코드가 중복 될 수 있습니다.
2. 이 문제를 해결하기 위해보다 강력한 방법은 여러 "작업"을 수행하는 일반적인 방법을 제공 redux-thunk를 구현하는 것입니다 (그것이 돌아 오는 동작을 호출, 또는 비동기 작업을 수행, 또는 두 가지 모두 일!)에 변화에 대한 응답. 단지와 유사한 browserHistory.push(action.path)에 통화로 dispatch(increment) 통화 중 하나를 교체하는 상상의 incrementTwice 기능에, 귀하의 경우에는 Can I dispatch multiple actions without Redux Thunk middleware?
3. :
   • 댄 여기 redux-thunk이 실제로 제공하는 것에의 단순함을 강조 좋은 반응을 보인다 아래 :

돌아 오는 행동

을 썽크

export const dispatchThenRoute = (myAction, myPath) => { 
    return (dispatch) => { 
     dispatch(myAction) 
     browserHistory.push(myPath); 
    } 
};