2

我在正在构建的 Web 应用程序中多次遇到这种情况，我正在寻找一种最佳实践来实现和重构。

作为入门的一部分，用户将创建一个 pin，单击/点击一个按钮将其保存到状态并移动到新视图（或路线），重新输入 pin，然后单击/点击一个按钮以确认并提交它，将其发送到后端。

我正在尝试确定构建此功能的最佳方法，以处理在将信息发送到服务器之前发生在故事中间的无意刷新或刷新。

我看到了几种处理/构建它的方法：

  1. 我可以使用路由（即foo.com/account/pin/create然后foo.com/account/pin/confirm）构建它，并通过路由器提供的道具传递引脚。但是，如果用户刷新/pin/confirm，则传递的 pin/pin/create会丢失。我可以检查道具并将它们重定向回/pin/create并显示消息原因。
  2. 我可以在没有路由的情况下使用具有state.view道具的类容器来构建它。在渲染中，我会运行一个开关来确定基于state.view. 例子：
class foo extends Component {
  state = {
    view: 'view1',
  };

  handleSubmit = () => {
    // send data off
  };

  cycleView = () => {
    this.setState(prevState => {
      switch (prevState.view) {
        case 'view1':
          return { view: 'view2' };
        case 'view2':
          return { view: 'view3' };
        case 'view3':
          this.handleSubmit();
          navigate('/dash');
          break;
        default:
          return { view: 'notice' };
      }
    });
  };

  render() {
    const { view } = this.state;

    const mainComponent = () => {
      switch (view) {
        case 'view1':
          return <View1 />;
        case 'view2':
          return <View2 />;
        case 'view3':
          return <View3 />;
      }
    };

    return (
      <div className="wrapper">
        <ProgressIndicator currentStep={2} numberOfSteps={4} />

        {mainComponent()}

        <Nextbutton
          ctaText="Next"
          onClick={
            view === 'view1' || view === 'view2'
              ? this.cycleView
              : this.handleSubmit
          }
        />
      </div>
    );
  }
}
  1. 我可以使用 Redux-Persist 将其存储在本地存储中，但是将私有 PIN 放入浏览器的本地存储中感觉很麻烦。（这是否像我被引导相信的那样不安全？）此外，我倾向于更喜欢组合事物，并避免将本质上不是真正全球性的事物放入 Redux。

所以问题是这些选项中哪一个是最好的？或者有没有更好的我没有列出？

注意：我正在使用@reach/router。

编辑添加代码片段。

4

1 回答 1

1

在大多数情况下，我建议使用选项 2。从用户的角度来看，他们仍在做一件事。如果我在确认步骤刷新，我希望从一个新的 pin 重新开始。想象一下，我开始了这个过程，然后分心了，回到表格，忘记了我最初设置的内容。这是一个合法的案例，我会故意刷新，并积极希望重置表单。在其他情况下，重新输入密码会带来一些不便。

也有一些方法可以清理这个模型。例如，您可以使下一个按钮成为 switch 语句或子组件的一部分，并为它们提供独特的操作，这样您就不需要在事件处理程序中使用 switch 语句。或者，如果这是一种非常常见的模式，请创建一个抽象组件来为您处理切换。

如果您有类似购物车的东西，其中每个步骤都将用户的选择保存到 api 或本地存储，那么选项 1 或 3 会更有意义。

于 2019-12-20T16:14:30.077 回答