规范化Redux状态

Question

我正在尝试制作一个简单的表单构建器。

假设我有一个包含一些行的画布，每行都有一些列，而在列中，它们将自己拥有输入。

我目前的状态：

const state = {
  row: [{
    id: 1,
    created: '',
    col: [{ type: 'text' }, { type: 'tel' }],
  }, {
    id: 2,
    created: '',
    col: [{ type: 'number' }, { type: 'button' }],
  }],
};

使用上述形状，我操作数据真的很难。我已经阅读了documentation，但我仍然没有得到它。请通过规范化帮助我找到这种状态的最佳形状。任何帮助将非常感激。

以下是一个快速演示，该数据将如何用于我的表单Demo

Answer 1

redux状态可以变平。让字段表示每个字段都有rowIndex和colIndex。

const state = {
  fields: [{
    id: 1,
    created: '',
    type: 'text',
    rowIndex: 0,
    colIndex: 0
  }, {
    id: 2,
    created: '',
    type: 'tel',
    rowIndex: 0,
    colIndex: 1
  }, {
    id: 3,
    created: '',
    type: 'number',
    rowIndex: 1,
    colIndex: 0 
  }, {
    id: 4,
    created: '',
    type: 'button',
    rowIndex: 1,
    colIndex: 1 
  }]
}