Implementing a modal form with an ajax request using react, redux, and react-redux has been my current project.
In my understanding, react-redux allows you to :
- display data from the redux store in your component
- dispatch an event from the container to redux
I have also integrated redux-saga to manage Ajax requests triggered by redux.
However, I am facing a challenge on how to perform an action (e.g. close the modal form) when a specific event is triggered from Redux.
Below is an example of code snippet:
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 ;
The reducers are structured as follows:
isLoading = truewhenAJAX_REQUESTEDis fired (others set to false)success = trueupon receivingAJAX_SUCCESS(others set to false)error = trueifAJAX_FAILis dispatched (others set to false)
I aim to update state.open to false when isLoading transitions from true to false, and success changes to false to true.
I am seeking guidance on achieving this without complicating the state management.
Edit:
Below is my saga's code for handling events:
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),
]
}