반응, 특정 redux 작업을 호출 할 때 모든 확장기를 엽니 다.

Question

기본적으로 내가 달성하고자하는 것은 누군가가 제출을 시작할 때 모든 확장기를 여는 것입니다. 꽤 쉽게 들릴지 모르겠지만 내가 얻은 해결책은 꽤 못생긴다. 액션이 전달되면 redux의 상태가 확장기를 열어야한다는 신호 구성 요소로 변경된 후 즉시 다른 액션을 호출하여 감속기 상태를 재설정합니다. 나는 관측 가능한 redux를 사용하고 있기 때문에 신호를 보내기 위해서 서사시에서 시작과 끝을 부를 수 있습니다. 그러나이 방법은 상당히 이상하게 보입니다. 구성 요소에 신호를 보내어 더 나은 작업을 수행 할 수있는 더 좋은 방법이 있습니까? 다음은 위의 코드입니다.

Answer 1

여기에 질문은 추가 상태가 필요없는 경우 구성 요소가 응용 프로그램 관련 이벤트/신호를 관찰하는 방법입니다.

해결 방법에는 응용 프로그램 상태에 forceExpand 신호 (추악함이있는 곳)를 추가하는 작업이 포함됩니다. 해당 신호를 얻기 위해 상태 트리에 연결해야하고 현재 렌더링 된 각 <Expander>에 대해 다시 설정해야합니다.

대신에 redux-observable없이 RxJS를 사용할 수 있습니다. 이 솔루션을 사용하면 을 생성하고 관련 작업을 redux 저장소에 푸시 할 때마다이를 내 보냅니다. 그런 다음 구성 요소에있는 Observable에 가입하고 가입을 취소합니다.

신속하고 더러운 예 :

// in some module 
export const ExpandSignal = new Rx.Subject(); 
export const ExpandSignalActionTypes = [ ... ]; 

// middleware that looks at the redux actions 
const signalMiddleware = store => next => action => { 
    if (ExpandSignalActionTypes.includes(action.type)) 
    ExpandSignal.next(); 

    return next(action); 
}; 

// implement with wrapper, or integrate into existing component 
class ExpandWrapper extends React.Component { 
    state = { expanded: false }; 

    componentDidMount() { 
    this.subscription = ExpandSignal.subscribe(() => this.setState({ expanded: true }); 
    } 

    componentWillUnmount() { 
    this.subscription.unsubscribe(); 
    } 

    render() { 
    return (
     <Expander expanded={this.state.expanded} 
       onExpandedChanged={() => this.setState({ expanded: false })} /> 
    ) 
    } 
}