javascript - 如何处理 Redux 中的依赖 Action 创建者？

Question

假设我有一个 REST API 来编辑用户配置文件。这里涉及到两种方法

• 一种更新用户个人资料的方法；
• 获取当前配置文件的完成分数的方法。

当然，当用户更新他的个人资料时，我想获取完成分数。

这是我(天真的？)使用 redux 和 redux-thunk action creators 执行此操作的方法

function updateProfileAction(userId, profile) {

  return function (dispatch) {
    dispatch("PROFILE_UPDATE", /*...*/)
    api.updateProfile(userId, profile)
      .then(repsonse => dispatch("PROFILE_UPDATE_SUCCESS", /*...*/))
      // ▼ triggers the action that fetch the completion score
      // this is the line that bugs me
      .then(() => fetchProfileCompletionAction(userId))
  }

}

这条线让我烦恼的是:

• 它打破了单一职责原则(udpateProfileAction 突然负责也获取完成)；
• 它不是分形(如果我想添加一个依赖于配置文件更新的功能，我需要再次修改那段代码。

例如，如果出于某种原因我不想再显示完成(假设我删除了显示它的组件)并且忘记删除这行代码，则 fetchCompletion 将被触发但永远不会在图形组件中使用)。

我在想，也许在消费完成被抓取的组件中，我可以在这个时候订阅商店和dispatch。这将使我能够以更具 react 性的方式

进行编码

function Completion(props) {

  props.store.subscribe(state => {
    //check if profile has changed
    dispatch(fetchProfileCompletionAction(userId))
  })

  return <div> {props.completion} </div>
}

这是个好主意吗？有一个更好的方法吗？此外，我想检查相关状态是否已更改对于此解决方案来说并非易事。

Answer 1

就我个人而言，我更喜欢您当前的解决方案。

我是这样想的:

• Action 代表系统中发生的事情
• 状态可能因操作而改变
• 组件订阅它们呈现的状态的变化

有了这种理念，如果引发了一个没有 reducer 正在寻找的额外 Action ，也没关系。如果某些状态发生变化而没有任何组件会呈现，那也没关系。

对于您的第二个建议，正如您所建议的那样，很难确定状态是否已更改，因为您只有当前状态，而没有以前的状态，才能确定这一点。

如果你确实想做这样的事情，你可以使用 componentWillReceiveProps并使用 react-redux 连接组件，以便状态更改通过 props 进入，例如:

class ProfileSuccessNotification extends React.Component {

  componentWillReceiveProps(nextProps) {
    if (!this.props.success && nextProps.success) {
      this.props.showNotification(nextProps.userId)
    }
  }

  render() {
    return this.props.show ? <p>{this.props.userId} fetched successfully!</p> : null
  }
}

// map from where ever in your state
const mapStateToProps = (state) => ({
  userId: state.profile.userId,
  success: state.profile.loaded,
  show: state.profileNotification.show
})

const mapDispatchToProps = (dispatch) => ({
  showNotification: (userId) => dispatch(fetchProfileCompletionAction(userId))
})

export default connect(mapStateToProps, mapDispatchToProps)(ProfileSuccessNotification)

当然，你也可以让多个 reducer 对同一个 Action 使用react。我不确定 PROFILE_UPDATE_SUCCESS 和 fetchProfileCompletionAction 引发的操作之间有什么区别，所以也许您只想在 时更新 2 个状态PROFILE_UPDATE_SUCCESS 得到提升，完全不需要链接第二个操作。