source

액션이 디스패치된 후 Redux 스토어에서 특정 속성 변경을 수신하는 방법

factcode 2023. 3. 10. 22:47
반응형

액션이 디스패치된 후 Redux 스토어에서 특정 속성 변경을 수신하는 방법

현재 다른 컴포넌트에서의 디스패치 후 데이터 변경에 따라 컴포넌트에서의 디스패치 액션을 처리하는 방법을 구상하고 있습니다.

다음 시나리오를 사용합니다.

dispatch(someAjax)-> 속성이 갱신됩니다.

그런 다음 이 동일한 속성에 의존하는 다른 컴포넌트가 업데이트되었음을 확인하고 새 값에 따라 액션을 디스패치해야 합니다.

어떤 타입을 사용하는 것보다value.on(change...솔루션, 이러한 유형의 '침묵적' 액션을 처리하기 위해 선호하는 방법은 무엇입니까?

Redux의mapStateToProps그리고.connect리액트 사용componentDidUpdate(prevProps, prevState, snapshot)갈고리를 채우다

따라서 기본적으로 코드는 다음과 같습니다.

const mapStateToProps = (state) => ({ 
   specificProperty: state.specificProperty,
   // any props you need else
});

class YourComponent extends React.Component {
    render() {
      // render your component  
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevProps.specificProperty !== this.props.specificProperty) {
            // Do whatever you want
        }
    }
}

YourComponent = connect(mapStateToProps)(YourComponent);

두 가지 기본적인 접근법이 있습니다.액션이 실행된 후 상태를 분산시키는 미들웨어 또는 Redux의 로우레벨을 사용하는 방법입니다.store.subscribeAPI.

Redux FAQ에는 이에 대한 답변이 있습니다.또한 Redux 관련 애드온 및 유틸리티의 분류 목록을 보관하고 있으며, 여기에는 데이터 변경을 듣기 위한 다양한 접근 방식을 구현하는 기존 스토어 변경 구독 라이브러리 그룹이 포함되어 있습니다.

언급URL : https://stackoverflow.com/questions/36557089/how-to-listen-for-specific-property-changes-in-redux-store-after-an-action-is-di

반응형