React-Native + Redux：表单字段的随机数

Question

我是 react-native、redux 和 saga 的新手，并且运行遇到了一个我无法找到解决方案的用例。我了解如何将状态映射到属性并在 action、reducer 和 saga 之间传递状态。到目前为止，这对我来说很有意义。这就是事情似乎变得冒险的地方。我有一个表单，在任何给定时间都需要可变数量的表单字段，具体取决于从数据库返回的内容。

举个例子，假设我有这样的结构：

{
    name: ‘’,
    vehicleMake: ‘’,
    vehicleModel: ‘’,
    carLotCity: ‘’,
    carLotState: ‘’,
    carLotZipCode: ‘’,
    localPartsManufacturers: [{name: ‘’, address: ‘’, zipCode}]
}

从名称到 carLotZipCode 的所有内容都只需要一个文本字段，但是，localPartsManufacturers 数组可以表示任意数量的对象，每个对象都需要自己的一组文本字段。就将字段映射到状态并将状态映射到属性而言，我将如何使用 redux 来解释这一点？我对如何开始这种情况感到困惑。我了解如何在固定字段的情况下投影映射。

Answer 1

没有什么可以阻止您在 Redux 中保留列表、映射、集合或任何其他对象。

剩下的唯一事情就是如何将状态映射到道具，以及如何使用它们。不是将集合中的单个元素映射到道具，而是将整个集合映射到单个道具，然后在渲染方法中迭代集合。

在该操作中，您可以传回一个新集合，该集合由组成部件列表的表单字段组成。然后，您的减速器将替换集合本身。

或者，在更改部分集合中的元素后，您可以发送一个带有其 ID 的操作，在缩减器的集合中找到它并替换已更改的元素/添加新元素/删除已删除的元素.

Answer 2

我会保留来自后端的数据。这样你就可以避免规范化它。我认为我们在渲染字段时必须更聪明。这是我的建议：

function onTextFieldChange(name, index) {
  // either name = `name`, `vehicleMake`, ...
  // or
  // name = `localPartsManufacturers` and `index` = 0
}

function createTextField(name, index) {
  return <input
    type='text'
    name={ name }
    onChange={ () => onTextFieldChange(name, index) } />;
}

function Form({ fields }) {
  return (
    <div>
      {
        Object.keys(fields).reduce((allFields, fieldName) => {
          const field = fields[fieldName];

          if (Array.isArray(field)) {
            allFields = allFields.concat(field.map(createTextField));
          } else {
            allFields.push(createTextField(fieldName));
          }
          return allFields;
        }, [])
      }
    </div>
  );
}

Form 接收您在商店中拥有的所有数据。然后我们检查该字段是否是一个数组。如果它是一个数组，我们遍历其中的字段并生成与其他属性相同的输入 createTextField。这里棘手的部分是如何更新商店中的数据。请注意，当文本字段数据更改时，我们正在传递 index。在减速器中，我们必须编写如下内容：

case FIELD_UPDATED:
  const { name, index, value } = event.payload;

  if (typeof index !== 'undefined') {
    state[name][index] = value;
  } else {
    state[name] = value;
  }
  return state;

React-Native + Redux：表单字段的随机数

React-Native + Redux: Random number of form fields

react-native

redux-saga

react-redux