重用React组件的业务逻辑

Question

我刚刚开始学习React，我正在努力了解在组件之间重用业务逻辑的好方法。

例如，有许多表单提交数据。工作流程始终相同：

1. 填写数据；
2. 点击提交；
3. 显示小吃店并显示一条加载消息；
4. 网络请求已发送；
5. 如果请求成功，则显示带有成功消息的新小吃栏，并且在某些情况下，它会重定向到其他路线；
6. 如果请求返回错误，则显示带有错误消息的小吃店。

我创建了一个HOC：

function withSubmit(WrappedComponent, request, navigateTo) {
  return class extends Component {
    constructor() {
      super();
      this.state = {
        snackbar: null,
        navigate: null,
      };
    }

    updateSnackbar = snackbar => this.setState({ snackbar });

    handleSubmit = (...params) => {
      this.updateSnackbar('Loading...');

      // API request passed from the parent component to be called only after submitting a form.
      request(...params)
        .then(() => {
          this.updateSnackbar(navigateTo.msg);

          if (navigateTo.url) {
            this.setState({ navigate: navigateTo.url });
          }
        })
        .catch(err => this.updateSnackbar(err.message));
    };

    render() {
      const { navigate, snackbar } = this.state;

      return (
        <div>
          <WrappedComponent onSubmit={this.handleSubmit} />
          <Snackbar
            open={!!snackbar}
            message={snackbar}
          />
          { navigate ? <Redirect to={navigate} /> : null }
        </div>
      );
    }
  };
}

有效。但是，这似乎有点复杂。有没有更简单的方法可以重用该逻辑/流程？