2017-02-22 6 views
1

나는 react & redux 응용 프로그램을 만들고 다음과 같은 문제가 있습니다. 내 구성 요소 중 하나에서 프로그래밍 방식으로 다른 페이지로 이동하고 모달을 표시하고 싶습니다.react-router-redux push는 redux-batched-actions와 호환되지 않습니까?

두 가지 작업에서이 작업을 수행하면 상태가 두 번 업데이트되어 (내 모달이 두 번 렌더링되어 사라지게 됨으로 인해) 내 응용 프로그램에서 제대로 작동하지 않는다는 것을 알았습니다.

그래서 나는 한 번 redux 배치 작업을 사용하여 batchActions를 두 가지 함수 ("push"및 "openModal"유형의 작업)로 호출하여 상태를 업데이트하려고합니다. 그러나 어떤 이유로 든 batchActions에서 "push"를 호출하면 작동하지 않습니다. 예 :

newPath: (path) => dispatch(batchActions([displayModal("title", "message"])) 

그래서 batchActions처럼 보인다 : batchAction 내에서 모달 동작이 작동 파견,

newPath: (path) => dispatch(push(path)) 

을 그리고 :

import { push } from 'react-router-redux'; 
import { batchActions } from 'redux-batched-actions'; 

myFunction: function() { 
    this.props.newPath("/mypath"); 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     newPath: (path) => dispatch(batchActions([push(path)])), 
    } 
} 

자체 푸시 작업을 파견은 다음과 같이 잘 작동 어떤 이유로 "밀어 넣기"동작을 인식하지 못하고 이유를 파악할 수 없습니다.

누구나 batchActions가 "푸시"작업을 올바르게 처리하지 못하는 이유를 알 수 있습니까?

안부가

답변

0

react-router-reduxpush 조치 routerMiddleware에 의해 처리된다. routerMiddleware은 유형에 따라 라우터 특정 작업 만 찾습니다. 반면에 redux-batched-actionsredux-batched-actions 유형의 특수 문자로 하나 이상의 복합 액션에서 두 개 이상의 작업을 래핑합니다. 따라서 routerMiddleware은 미들웨어를 통과하고 경로 변경이 일어나지 않을 때 라우터 동작으로이 동작을 식별하지 않습니다.

https://github.com/ReactTraining/react-router/issues/5227에서 문제를 설명하는 데 문제가 있습니다.

솔루션 : react-batch-enhancer : 당신이 배치 행동에 대한 react-redux-router와 함께 사용할 수있는 다른 패키지가

. 이것은 미들웨어 수준에서 작동하므로 기본 배치 작업은 해당 미들웨어로 처리됩니다.

관련 문제