gpt4 book ai didi

javascript - 成功操作多次运行

转载 作者:行者123 更新时间:2023-12-03 04:09:05 25 4
gpt4 key购买 nike

我正在使用redux-saga从服务器获取数据进行异步操作。我可以获取数据,但我认为我做得效率不高。因为我的 EMAIL_SERVICE_FETCH_SUCCESS 操作运行了多次。在给出示例之前,我想澄清一下我的应用程序结构。

AdminDashboard(admin/dashboard) - parent component which has SideNavigation and Routes component as a children.

SideNavigation has links which when clicked will show data in the middle of the page, just aside SideNavigation.

现在问题来了。当我转到路线/admin/dashboard/email_service 时,我得到了我期望的数据。之后,如果我单击其他一些链接并返回到 email_service,那么成功操作会被多次触发,并且它会继续增加、增加、增加。

index.js

const mapDispatchToProps = dispatch => ({
fetchEmailService: () => dispatch(fetchEmailService())
});

const mapStateToProps = createStructuredSelector({
email: selectEmailService()
});

class EmailService extends React.PureComponent {
state = {
emailService: {
api_key: "",
domain: ""
},
};

componentDidMount() {
this.props.fetchEmailService();
}

componentWillReceiveProps(nextProps, prevProps) {
if (nextProps.email) {
nextProps.email
.entrySeq()
.map(([key, value]) => {
this.setState(state => ({
emailService: { ...state.emailService, [key]: value }
}));
})
.toArray();
}
}

render() {
const { emailService, errors } = this.state;
const { email } = this.props;
if (email.size === 0) {
return <div>fetching...</div>;
}
return (
<form onSubmit={this.handleSubmit}>
<TextFieldGroup
name="api_key"
type="text"
value={emailService.api_key}
onChange={this.handleChange}
error={errors.api_key}
/>
<TextFieldGroup
name="domain"
type="text"
value={emailService.domain}
onChange={this.handleChange}
onBlur={this.handleBlur}
/>
<button className="btn btn-primary">Save Changes</button>
</form>
);
}
}

export default connect(mapStateToProps, mapDispatchToProps)(EmailService);


reducer.js

function emailServiceState(state = initialState, action) {
switch (action.type) {
case EMAIL_SERVICE_FETCH_REQUEST:
return state.set("requesting", true).set("successful", false);
case EMAIL_SERVICE_FETCH_SUCCESS:
return state.set("successful", true).set("emailService", fromJS(action.emailService.data));
case EMAIL_SERVICE_FETCH_FAILURE:
return state.set("error", action.error);
default:
return state;
}
}

selectors.js

export const selectEmailService = () => state =>
state.getIn(["emailService", "emailService"]);

sagas.js

function* fetchemailService(action) {
yield call(
EmailApi.get(
"api/configuration/email-service",
emailServiceFetched,
emailServiceFetchingError
)
);
}

function* emailServiceWatcher() {
yield takeLatest(EMAIL_SERVICE_FETCH_REQUEST, fetchemailService);
}

export default [emailServiceWatcher];

enter image description here

最佳答案

好的,我查看了您的存储库,发现了问题:

这是EmailService/sagas.js中的代码,检查我添加的注释。

function* setupemailService(action) {
const successWatcher = yield fork(redirectOnSuccess);
yield fork(...);

// 1. On LOCATION_CHANGE you are only cancelling the `successWatcher`
yield take([LOCATION_CHANGE, EMAIL_SERVICE_SETUP_FAILURE]);
yield cancel(successWatcher);
}

function* emailServiceWatcher() {

yield takeLatest(EMAIL_SERVICE_SETUP_REQUEST, setupemailService);

// 2. you never cancelled `EMAIL_SERVICE_FETCH_REQUEST` watcher
yield takeLatest(EMAIL_SERVICE_FETCH_REQUEST, fetchemailService);
}

export default [emailServiceWatcher];

你需要做的是这样的

function* emailServiceWatcher() {
const setupeWatcher = yield takeLatest(EMAIL_SERVICE_SETUP_REQUEST, setupemailService);
const fetchWatcher = yield takeLatest(EMAIL_SERVICE_FETCH_REQUEST, fetchemailService);
// Cancel these watchers on LOCATION_CHANGE
yield take([LOCATION_CHANGE]);
yield cancel(setupeWatcher);
yield cancel(fetcheWatcher);

}

关于javascript - 成功操作多次运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44409189/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com