React-Redux：接收和發送表單數據（服務器）

Question

我尋求幫助如何在 redux 上制作 devextreme 形式。 無插件：redux-form、formik 等。 在我看來，它們是不必要的，因為 Devextreme 有許多內置功能。 也許我錯了。

我讀了這篇文章，但也許​​有更簡單的東西https://medium.com/@pnpsegonne/tutorial-creating-a-form-with-react-redux-c1b3025cf26b

我需要一個如何從服務器獲取數據到表單字段的示例。 以及如何通過單擊“保存”按鈕更改它們並將它們傳輸到服務器。 當然，比如服務器可以換成超時功能什么的。 https://codesandbox.io/s/overview-devextreme-forms-and-multi-purpose-t86mw

import React from "react";

import { employee, positions, states } from "./data.js";

import Form, {
  SimpleItem,
  GroupItem,
  ButtonItem,
  Label
} from "devextreme-react/form";
import "devextreme-react/text-area";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.birthDateOptions = { width: "100%" };
    this.positionOptions = {
      items: positions,
      value: ""
    };
    this.stateOptions = {
      items: states
    };
    this.phoneOptions = { mask: "+1 (000) 000-0000" };
    this.notesOptions = { height: 140 };
  }
  render() {
    return (
      <Form formData={employee}>
        <GroupItem cssClass="first-group" colCount={4}>
          <SimpleItem render={avatarRender} />
          <GroupItem colSpan={3}>
            <SimpleItem dataField="FirstName" />
            <SimpleItem dataField="LastName" />
            <SimpleItem
              dataField="BirthDate"
              editorType="dxDateBox"
              editorOptions={this.birthDateOptions}
            />
          </GroupItem>
        </GroupItem>
        <GroupItem cssClass="second-group" colCount={2}>
          <GroupItem>
            <SimpleItem dataField="Address" />
            <SimpleItem dataField="City" />
            <SimpleItem
              dataField="Position"
              editorType="dxSelectBox"
              editorOptions={this.positionOptions}
            />
          </GroupItem>
          <GroupItem>
            <SimpleItem
              dataField="State"
              editorType="dxSelectBox"
              editorOptions={this.stateOptions}
            />
            <SimpleItem dataField="ZipCode" />
            <SimpleItem dataField="Mobile" editorOptions={this.phoneOptions}>
              <Label text="Phone" />
            </SimpleItem>
          </GroupItem>
          <SimpleItem
            colSpan={2}
            dataField="Notes"
            editorType="dxTextArea"
            editorOptions={this.notesOptions}
          />
        </GroupItem>
        <ButtonItem
          horizontalAlignment="left"
          buttonOptions={{
            text: "Save",
            type: "success",
            useSubmitBehavior: true
          }}
        />
      </Form>
    );
  }
}

function avatarRender() {
  return <div className="form-avatar" />;
}

export default App;

Answer 1

我需要一個如何從服務器獲取數據到表單字段的示例。 以及如何通過單擊“保存”按鈕更改它們並將它們傳輸到服務器。 當然，比如服務器可以換成超時功能什么的。

如果這是唯一對您重要的事情，那么“您可能不需要 redux”。 您可以使用從 API 返回的所需數據調用componentDidMount和setState的 API。

但也許有更簡單的東西

也許不吧。 別擔心，隨着時間的推移，它會變得更容易。

目前，我已經在這里使用 redux 和 redux-saga 實現了 API 集成。 希望這就是你所需要的。