onClick 처리기에서 context.store.getState()를 안티 패턴으로 사용하고 있습니까?

Question

대시 보드에는 다음과 같은 간단한 구성 요소가 있습니다. 대시 보드 객체는 소품을 통해 주입됩니다. handleDeleteDashboard 액션은 대시 보드가 마지막으로 사용 가능한 것이 아닌지를 확인합니다. 그럴 경우 삭제할 수 없습니다. 이 검사를 위해 mapStateToProps의 저장소에서 얻는 nrOfDashboards가 필요합니다. 그래서 컴포넌트를 redux 스토어에 연결했습니다.

class Dashboard extends Component { 
    constructor(props) { 
     super(props); 
     this.handleDeleteDashboard = this.handleDeleteDashboard.bind(this); 
    } 

    handleDeleteDashboard() { 
     const { dashboardDeleteAction, dashboard, nrOfDashboards } = this.props; 
     if (nrOfDashboards < 2) { 
      // NOT Allowed to delete 
     } else { 
      dashboardDeleteAction(dashboard.id); 
     } 
    } 

    render() { 
     const { dashboard } = this.props; 
     return (
      <Content> 
       <h1>{dashboard.name}</h1> 
       <Button onButtonClick={this.handleDeleteDashboard}>Delete</Button> 
      </Content> 
     ); 
    } 
} 
Dashboard.propTypes = { 
    dashboard: customPropTypes.dashboard.isRequired, 
    nrOfDashboards: PropTypes.number.isRequired 
}; 
function mapStateToProps(state) { 
    return { 
     nrOfDashboards: selectNrOfDashboards(state) 
    } 
} 
export default connect(mapStateToProps, { dashboardDeleteAction: dashboardActionCreators.dashboardDelete })(Dashboard); 

하지만 지금은 구성 요소가 저장하고 업데이트에 가입 할 때마다 nrOfDashboards 변경 (내가 다시 렌더링의 경우에 방지하기 위해 여기에 shouldComponentUpdate을 수행 할 수 있습니다 알고 있지만 그 지점하지 않습니다). 그래서 기본적으로 삭제 버튼을 클릭 할 때만이 정보가 필요하지만 기본적으로 nrOfDashboards의 변경 사항을 구독하고 있습니다.

그래서 저는 대체 솔루션을 생각해 보았습니다. 저장소에서 Component를 연결 해제하고 handleDeleteDashboard 메소드의 컨텍스트를 통해 저장소에 액세스했습니다.

이 기능은 저에게 잘 돌아가며 적극적으로 버튼을 클릭 할 때마다 저장소에서 새로운 상태를 유지합니다. 어쨌든, 전에이 기술을 다른 곳에서 본 적이 없으며 저장소에 액세스하는 것이 mapStateToProps 외부에서 수행되어서는 안됩니다. 하지만 제 질문은 주문형 상점에 직접 액세스하는 것이 안티 패턴이고, 구성 요소를 상점에 연결하는 코드 예제 1을 따라야하는 것이 더 나은가요?

Answer 1

예. 상점에 직접 액세스하는 것은 안티 패턴으로 간주됩니다. Idiomatic Redux 코드는 기본 종속성 주입을 사용합니다. connect() 및 mapState() 및 mapDispatch() 인수는 구성 요소에 필요한 데이터와 dispatch에 대한 참조를 제공하며 Redux-Thunk와 같은 미들웨어는 작업 작성자에서 getState() 및 dispatch()에 액세스 할 수있게합니다.

구성 요소가 단순히 작업 작성자를 보내고 작업 작성자 논리가 실제 작업을 실제로 보내야하는지 여부를 걱정하게하는 것이 이상적입니다. http://redux.js.org/docs/FAQ.html#store-setup-multiple-stores

:이 주제에 돌아 오는 자주 묻는 질문 질문을 참조

// action creator 
export function deleteDashboard(dashboardID) { 
    return (dispatch, getState) => { 
     const state = getState(); 
     const numberOfDashboards = selectNumberOfDashboards(state); 

     if(numberOfDashboards >= 2) { 
      dispatch({ 
       type : "DELETE_DASHBOARD", 
       payload : { 
        dashboardID 
       } 
      });    
     }  
    } 
} 


// component 

handleDeleteDashboard() { 
    const {dashboard} = this.props; 
    this.props.dispatch(deleteDashboard(dashboard.id)); 
} 

: 그래서, 당신의 경우에, 그처럼 보일 수 있습니다