react에서 여러 소품의 구성 요소 업데이트 방지

Question

데이터가 변경 될 때 움직이는 recharts 차트가있는 react/redux 앱이 있습니다.

나는 Redux을 사용하고 있으며 대부분 내 행동은 state 속성을 변경하여 하나만 props이됩니다. 그러나 일부 비동기 작업과 다른 작업 호출에 대한 내 행동 중 일부는 thunks을 사용 중입니다.

예를 들어 사용자가 축을 선택할 때 호출 될 동작이 getChartData 일 수 있습니다.

export let getChartData = axis => dispatch => { 
    // trimmed for brevity 
    fetchJSON(url).then(data => { 
    dispatch(dataRetrievalSuccess(data)); 
    dispatch(updateSelectedAxis(axis)); 
    }).catch(error => { 
    dispatch(dataRetrievalError(error)); 
    }); 
}; 

이 예에서 updateSelectedAxis 값은 현재 선택된 축 및 차트 props.data 전달 책임 것이다 dataRetrievalSuccess 표시 기능을 책임지는 로컬 상태 속성을 변경한다.

내가 해결하려고하는 문제는 selectedAxis 구성 요소가 변경되었지만 데이터가 변경되지 않았을 때 차트가 업데이트되지 않도록하는 것입니다.

은 내가 componentWillRecieveProps 같은 것을 사용하지만 내 위의 thunk 예를 여기 가지고있는 문제는 내가 모두 this.props.data 및 nextProps.data 그래서에서 동일한 데이터를 가지고 dataRetrievalSuccess를 호출 할 때 나는 componentWillRecieveProps 하나의 호출을받을 것입니다 수있을 것이라고 생각 I 업데이트를 막을 수 있습니다. 그러나 나중에 updateSelectedAxis으로 전화 할 때 이미 변경되었으므로 data이 소품의 일부로 포함되지 않으므로 두 값에 따라 논리 연산을 수행 할 수 없습니다.

나는 이것이 아마도 주문 문제라고 생각했지만, 이것을 하나의 행동으로 묶어도 여러 가지 소품을 얻을 수 있습니다.

데이터와 축 변경을 하나의 객체로 묶어서이 문제를 해결할 수 있습니까? 저는 건축에 관해서 가장 좋은 방법은 모르겠지만 어떤 제안도 환영합니다.

편집 : 그냥 내가 두 렌더링됩니다 국가의 자신을 약간 수정 한 두 가지 작업을 모두 파견하고, 조금 확장합니다.

나는 이런 식으로 뭔가 쓰는 시도했다 : 거의 작동

shouldComponentUpdate(nextProps, nextState) { 
    if(this.dataHasChanged(nextProps)) { 
    return true; 
    } 
    return false; 
} 

을하지만, 데이터가 차트를 보여줍니다 때마다 하나가 될 필요가있는 뒤에 렌더링입니다.

Answer 1

썽크를 사용하여 작업 생성자 아래에있는 현재 상태를 액세스 할 수 있습니다 (썽크가 상태를 주입 함). 그러면 아약스 응답 데이터를 이전 상태 데이터와 비교하여 새 작업을 전달할 수 있습니다.

export let getChartData = axis => (getState, dispatch) => { 
      // trimmed for brevity 
      fetchJSON(url).then(data => { 
      if(getState().data !== data){ 
      dispatch(dataRetrievalSuccess(data)); 
      dispatch(updateSelectedAxis(axis)); 
      } 
      }).catch(error => { 
      dispatch(dataRetrievalError(error)); 
      }); 
     };