Question

我的团队几个月前开始使用sagas并且很喜欢它们，但是最近我们遇到了一些处理多个回调的最佳方法的问题，即在状态更新后发生的组件特有的回调。

到目前为止，我们已经将两种解决方案混为一谈，但我们仍然认为可能会有一种更清洁的方式。

例如，假设我们想要首先显示特定于组件的通知，并且仅在第一次提取用户数据时显示。

在第一个解决方案中，我们附加了一个回调函数，并在一切成功后在saga中调用它。这里是半伪代码，其中this.props.loadUser调度一个动作：

class UserProfile extends React.Component {

  showNotification = () => {
   // notification logic
  }

  loadUser = (id) => {
    this.props.loadUser(id, this.showNotification);
  }

我们的saga处理回调逻辑，如下所示：

import api from 'utils/api';
import { receiveData } from 'modules/user';

function* fetchUserSaga(action) {
  const response = yield call(api.get,  `/users/${action.id}`);
  yield put(receiveDevice(response.data));
  if (typeof action.callback === 'function') { action.callback(); }
}

在第二个解决方案中，我们只检查状态中请求的状态是从提取到成功，然后从组件触发通知。再次，在半伪代码中：

class UserProfile extends React.Component {

  showNotification = () => {
   // notification logic
  }

  loadUser = (id) => {
    this.props.loadUser(id);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.status.fetchUser === 'success' && this.props.status.fetchUser !== 'success') {
      this.showNotification()
    }
  }

这第二个解决方案似乎更加清晰，因为它将所有组件逻辑保留在组件上，但如果我们只想在第一次获取时发出通知，我们必须添加一个变量来防止这种情况。每当组件收到新组件时，我们必须比较道具，当我们知道我们只想触发一次操作时。

也许（希望）我们都缺少第三种方式。任何建议将不胜感激！

Answer 1

对于您的具体情况，我建议将通知逻辑放在组件中而不是操作中。这是因为显示通知实际上是一个表示问题，而不是数据问题。

我可能会在负责通知的任何组件的componentWillReceiveProps生命周期函数中添加一些逻辑。基本上，如果nextProps有数据且当前props没有，那么您需要渲染一些内容。

如果您不想使用生命周期功能，您可能仍然在操作中使用通用onSuccess回调，但您仍应决定是否在组件内部显示任何内容。

使用Redux-Sagas处理多个（组件级别）回调

1 个答案: