Question

我正在实现一个创建/编辑表，其中每一行都是一个表单（一次创建和多次编辑）。我的问题是redux商店架构支持复杂的表格。

多种编辑形式
创建表单
异步autocomplete选项的加载（针对每种形式）

以下是我的情况的一个示例：

Cat to toy Page

|   id   |                  cat                  |                  toy                  |    actions    |
|--------|---------------------------------------|---------------------------------------|---------------|
| create | autocomplete(selectedCat, catOptions) | autocomplete(selectedToy, toyOptions) | [add new row] |
| 1      | autocomplete(selectedCat, catOptions) | autocomplete(selectedToy, toyOptions) | [update row]  |
| 2      | autocomplete(selectedCat, catOptions) | autocomplete(selectedToy, toyOptions) | [update row]  |
| ...    | ...                                   | ...                                   | ...           |
| 10     | autocomplete(selectedCat, catOptions) | autocomplete(selectedToy, toyOptions) | [update row]  |


[<<] [<] 1 2 3 ... 33 [>] [>>]

表格包含休假

id-创建时由API生成
cat-选项为异步的autocomplete输入
toy-一个autocomplete输入，其中的选项是异步的（类似于cat）

数据蔗糖是相当简单的REST端点：

GET api/cat（支持过滤和分页）
GET api/toy（支持过滤和分页）
GET|POST|PUT|DELETE api api/catToys{/id?}

我当前的商店架构如下：

//Models (entity from API)

`CatModel` { id: number, name: string }
`ToyModel` { id: number, name: string }
`CatToToyModel`: { id: number, cat: CatModel, toy: ToyModel }


//States

`CatToToyPageState` {
    page: number,
    pageSize: number,
    catToToyIds: Array<number>,
}
`CatToToyFormState` {
    catOptionIds: Array<number>,
    catFilter: string,
    selectedCat: Cat,
    isCatOptionsLoading: bool,
    selectedToy: 'catToToyPage',
    toyOptionIds: Array<number>,
    selectedCat: Toy,
    isToyOptionsLoading: bool,
    isLoading: bool, // indicates if form submission 
}


//The Store

`Store` {
    entity: {
        cat: Map<number, CatModel>,
        toy: Map<number, ToyModel>,
        catToToy: Map<number, CatToToyModel>,
    },
    uiState: {
        catToToyPage: CatToToyPageState,
        catToToyForms : Map<number, CatToToyFormState>
    }
}

上面的商店很好，可以让我支持多种形式的住在一起

我的问题：

仅在我不删除entity（仅合并实体状态）的情况下有效。
在autocomplete中支持store有点麻烦（就我而言，我是猫和玩具的重复成员）。
不知道将create格式放在何处（当前位于uiState.catToToyForms[null]中，这很糟糕）
放置位置以及如何处理服务器错误

谢谢。

使用Redux架构管理多个相似的表单

0 个答案: