Redux: одна форма на запись для потенциально тысяч записей

Сценарий. У меня есть список активов <AssetList />. Когда пользователь прокручивает список вниз, мое приложение будет лениво загружать остальные активы. Таким образом, в зависимости от того, как далеко пользователь прокручивает страницу вниз, могут быть загружены сотни, если не тысячи ресурсов.

Проблема: щелчок по каждому ресурсу <Asset /> развернет его и позволит пользователю редактировать его поля (имя, содержание и т. д.). Переход должен быть плавным. На мой взгляд, каждый актив должен быть формой. Меня беспокоит 1) подход и 2) производительность.

Подход. Используемый здесь подход заключается в использовании одной формы для каждой записи с использованием redux-form. Существуют ли какие-либо альтернативы этому, которые также применяют архитектуру потока? Это общая проблема?

Другой возможный подход здесь — изменить дерево состояний как таковое и иметь одну форму для всего списка активов:

{
   assets: {..}, 
   assetForm: {..} 
}

И щелчок по <Asset /> вместо этого вызовет соответствующее действие, которое будет каскадироваться на редюсер, который обновит состояние assetForm.

Производительность. Больше всего меня беспокоит. Я не возражаю против большого количества форм на странице, но меня беспокоит то, что каждая форма связана с редуктором хранилища избыточности (или, по крайней мере, я думаю, что это то, что делают утилиты, такие как избыточная форма). Иными словами, влияет ли потенциальное наличие тысяч редукторов на производительность?

Прошу прощения, если мои предположения неверны. Я относительно новичок в реакции и редуксе.


reactjs javascript redux forms redux-form
person dipole_moment    schedule 18.11.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Я думаю, что вы высказываете обоснованные опасения по поводу довольно распространенного варианта использования. Чтобы ответить на некоторые из ваших вопросов, я думаю, что ваш подход действителен, за исключением того, что вы можете немного изменить его, чтобы не создавать так много форм. Я лично не использовал redux-form, поэтому я позволю тем, у кого больше опыта, добавить больше ответов или комментариев, но с более абстрактной точки зрения у вас должна быть форма только тогда, когда пользователь щелкает Asset, поэтому я предлагаю только рендеринг формы при нажатии Asset. Таким образом, у вас будет столько форм, сколько нужно пользователю, значительно меньше одной на Asset.

Что касается управления хранилищем, если вам нужно будет инициализировать форму для Asset, опять же без определенного redux-form опыта, не могли бы вы обеспечить достаточно простую структуру состояния и добавлять к ней только при инициализации формы? То есть представьте переменную состояния с именем assetForms, которая представляет собой объект, в котором каждый ключ является уникальным идентификатором Asset, а значение представляет собой другой объект с данными формы. Таким образом, опять же, вы сохраняете ровно столько объектов состояния, сколько имеется Assets.

Надеюсь, что это устранит некоторую путаницу, но не стесняйтесь расширить свой вопрос, если вам нужно больше деталей.

person ZekeDroid    schedule 18.11.2016
comment
Спасибо @ZekeDroid. На самом деле я изначально рассматривал возможность создания одной формы для всего списка активов. Я только что обновил свой вопрос, добавив больше деталей. Я думаю, что ваш подход является правильным. Что касается вашей второй части, где вы ссылаетесь на assetForms, то она управляется редукционной формой. Вы предоставляете ему ключ формы, который может быть вашим идентификатором актива, и он сохраняет в нем состояние формы, стиль словаря. - person dipole_moment; 18.11.2016
comment
Ах, я вижу, и насколько сложны ваши формы? Я бы почти рекомендовал управлять полями самостоятельно, так как это значительно упростило бы работу. Вы можете инициализировать каждый актив с идентификатором и обратным вызовом для onChange, чтобы родитель мог в этом обратном вызове запустить действие, например { type: 'ASSET_CHANGED', assetID: 'some_id', fieldsChanged: { name: 'foo', description: 'bar' } }. Таким образом, у вас нет абсолютно никакой дополнительной информации и, опять же, только столько полей состояния, сколько пользователь пытается их изменить. - person ZekeDroid; 18.11.2016
comment
Просто так я следую. Во-первых, вы бы порекомендовали одну форму на весь список активов? - person dipole_moment; 18.11.2016
comment
Ээ не уверен. Я думаю, вы говорите о бэкэнд-форме? Как в том, у которого есть способ опубликовать напрямую? Мне лично они не нравятся, и я бы порекомендовал простые inputs и http-запросы через ваши избыточные действия. - person ZekeDroid; 18.11.2016
comment
Ах, нет, на самом деле я использую redux-form, который выполняет preventDefault в форме и обрабатывает их асинхронно, вызывая обратный вызов onChange или onSubmit. Когда я сказал одну форму для всего списка, я просто имел в виду, что будет форма (или только поля, часть формы не имеет большого значения), которая будет загружаться и выходить в зависимости от того, на какой ресурс нажимает пользователь. Это звучит правильно? - person dipole_moment; 18.11.2016
comment
Попался. Вы имели в виду часть пользовательского интерфейса, да, поэтому у меня была бы одна форма для Asset, но отображать ее только тогда, когда пользователь щелкает. Вы можете сделать это с помощью React, выполнив выборочный рендеринг, что означает, что на основе текущего состояния (например, isEditing, которое может быть установлено на true по щелчку), вы визуализируете либо свой статический Asset (куча диапазонов или что-то еще), ИЛИ если isEditing, сделать форму. Это то, что вы имели в виду? И если вы сделаете это таким образом, что щелчок за пределами Asset установит isEditing в false, у вас будет только одна форма на вашей странице в любой момент времени. - person ZekeDroid; 18.11.2016
comment
Да именно это я и имел в виду. Спасибо еще раз! - person dipole_moment; 18.11.2016