成功操作多次运行

Question

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

AdminDashboard(admin/dashboard) - 父组件 SideNavigation 和 Routes 组件作为子组件。

SideNavigation 具有链接，单击该链接将在 页面中间，旁边就是 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];

Answer 1

好的，我查看了您的存储库，发现了问题：

这是EmailService/sagas.js里面的代码，查看我添加的cmets。

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

}