react-redux로 이벤트에 대한 액션 트리거

Question

나는 react/redux/react-redux를 사용하여 ajax 요청을하는 모달 폼을 구현하고 있습니다.

내가 올바른 생각하면, 반응-REDUX은 할 수 있습니다 :

이 REDUX에 컨테이너에서 이벤트를 전달하여 componant에 REDUX 저장소에서

• 데이터를 표시

내가 또한 redux-saga를 사용하여 redux에 의해 트리거 된 Ajax 요청을 처리한다.

그러나 Redux에서 특정 이벤트가 트리거되면 작업을 트리거하는 방법 (예 : 모달 형식을 닫는 방법)을 알 수 없습니다. 코드의

예 :

class MyFormDialog extends React.Component { 
    state = { 
     open: false, 
    }; 


    handleOpen =() => { 
     this.setState({open: true}); 
    }; 

    handleClose =() => { 
     this.setState({open: false}); 
    }; 

    render() { 
     const actions = [ 
      <FlatButton 
       label="Cancel" 
       onTouchTap={this.handleClose} 
      />, 
      <FlatButton 
       label="Submit" 
       onTouchTap={this.props.ajaxRequest} 
      />, 
     ]; 

     return (
      <div> 
       <MenuItem primaryText="Make a request" onTouchTap={this.handleOpen}/> 
       <Dialog 
        title="Make a request" 
        actions={actions} 
        modal={true} 
        open={this.state.open} 
        onRequestClose={this.handleClose} /> 
      </div> 
     ); 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    return { 
     loading: state.isLoading, 
     success: state.success, 
     error: state.error, 
    } 
}; 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
     ajaxRequest: (url, tags) => { 
      dispatch({type: "AJAX_REQUESTED"}) 
     }, 
    } 
}; 

const ConnectedMyFormDialog = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(MyFormDialog); 

export default ConnectedMyFormDialog ; 

기어는 다음과 같은 내장되어 : AJAX_REQUESTED 보낼 때

• isLoading = true는
• success = true이 AJAX_SUCCESS가 (다른 사람을 보낼 때 (다른 사람이 false로 설정되어 있습니다) false로 설정 됨)
• error = trueAJAX_FAIL는

그래서 내가 거짓으로 state.open을 변경하려면 (다른 사람이 false로 설정되어 있습니다)를 보낼 때 false에 true에서 isLoading 변화와 true에 false-success 변화.

나는 상태를 망치지 않고 어떻게하는지 잘 모릅니다.

편집 :

여기

내 무용담 코드는, 처리하는 이벤트 :

function* handleAjaxRequest(action) { 
    try { 
     yield call(api.doRequest); 
     yield put({type: "AJAX_SUCCESS"}); 
    } catch (e) { 
     yield put({type: "AJAX_FAILED"}); 
    } 
} 

export default function*() { 
    yield [ 
     takeEvery("AJAX_REQUESTED", handleAjaxRequest), 
    ] 
} 

Answer 1

당신은 즉시 당신의 구성 요소가 REDUX 특성/상태 업데이트를수록라고 componentWillReceiveProps()을 활용할 수 있습니다. 거기에서 redux 상태 변경에 반응하고 그에 따라 로컬 구성 요소 상태를 설정할 수 있습니다. 당신의 예에서

은은 다음과 같습니다

componentWillReceiveProps(nextProps) { 
    if (nextProps.loading !== this.props.loading && 
     nextProps.success !== this.props.success && 
     !nextProps.loading && nextprops.success) { 
    this.setState({ open: false }); 
    } 
} 

이 정확히 정의 원하는 동작입니다. 이제는 다른 케이스를 처리하고 state.open을보다 동적으로 설정해야합니다.하지만 이는 질문의 범위를 벗어납니다. 참고로

는 여기를 참조하십시오 https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops이

Answer 2

당신은 componentWillReceiveProps을 사용할 수 있습니다();

예 :

componentWillReceiveProps(newprops){ 
    if(!newprops.loading && newprops.success){ 
     this.setState({ 
      open: false, 
     }); 
    } 
} 

당신의 코드에서 그것을 시도 주시기 바랍니다. 이 함수는 구성 요소가 새 소품을 받으면에 의해 자동으로 호출됩니다. 내가 생각하기에 몇 가지 방법이있다. 그러나 이것은 내가 사용하는 것이다. ...