我正在使用react / redux / react-redux來實現(xiàn)執(zhí)行ajax請求的模式形式 .

如果我是正確的，react-redux使您能夠：

將redux商店中的數(shù)據(jù)顯示給您的組件

將容器中的事件調(diào)度到redux

我也使用redux-saga來處理redux觸發(fā)的Ajax請求 .

但是，當從Redux觸發(fā)特定事件時，我不知道如何觸發(fā)操作(例如：關(guān)閉模式窗體) .

代碼示例：

class MyFormDialog extends React.Component {

state = {

open: false,

};

handleOpen = () => {

this.setState({open: true});

};

handleClose = () => {

this.setState({open: false});

};

render() {

const actions = [

label="Cancel"

onTouchTap={this.handleClose}

/>,

label="Submit"

onTouchTap={this.props.ajaxRequest}

/>,

];

return (

title="Make a request"

actions={actions}

modal={true}

open={this.state.open}

onRequestClose={this.handleClose} />

);

}

}

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 ;

Reducers的構(gòu)建如下：

發(fā)送 AJAX_REQUESTED 時

isLoading = true (其他設(shè)置為false)

發(fā)送 AJAX_SUCCESS 時

success = true (其他設(shè)置為false)

發(fā)送 AJAX_FAIL 時

error = true (其他設(shè)置為false)

所以當 isLoading 從 true 更改為 false 并且 success 更改為 false 更改為 true 時，我想將 state.open 更改為false .

我不知道如何在不搞亂狀態(tài)的情況下做到這一點 .

編輯：

這是我的傳奇代碼，用于處理事件：

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),

]

}

總結(jié)

以上是生活随笔為你收集整理的redux react ajax,使用react-redux触发事件操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。