Управление несколькими похожими формами с использованием редукционной архитектуры - PullRequest
Новая
       17

Управление несколькими похожими формами с использованием редукционной архитектуры

0 голосов
/ 20 января 2019

Я реализую таблицу создания / редактирования, где каждая строка представляет собой форму (одно создание и многократное редактирование). Моя проблема связана с архитектурой магазина redux для поддержки сложной формы.

  • несколько форм редактирования
  • создать форму
  • async 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] и это плохо)
  • где поставить и как обрабатывать ошибки сервера

Спасибо.

...