Исходное состояние для глубоко вложенных объектов в Redux?

В одном из моих контейнеров (доступ к компоненту + редукс) я пытаюсь сделать это:

function mapStateToProps (state) {    
  return {
    url: state.projects.byId[state.selection.projectId].url
  };
}

Мое начальное состояние в редюсере — пустой объект {}. Когда мой компонент запускается и работает, он запрашивает некоторые данные из API для заполнения состояния. Однако, поскольку изначально мое начальное состояние пусто, я получу ошибку, что url не определено. Справедливо.

Одно решение, которое я придумал (и то, что я обычно делаю), состоит в том, чтобы создать начальное состояние с некоторыми фиктивными данными, подобными тем, которые я в конечном итоге получу из API.

Тем не менее, это первый крупный проект, над которым я работаю, и мое состояние становится довольно вложенным и довольно глубоким, поэтому мне интересно, есть ли что-то лучше? Я также не уверен, что решение, которое я придумал, является лучшей практикой.


reactjs javascript redux react-redux stateful
person R. Kohlisch    schedule 26.11.2018    source источник
comment
Как вы используете url в своем компоненте? Вы можете визуализировать его условно вместо использования фиктивных данных.   -  person devserkan    schedule 27.11.2018
comment
Вы можете использовать библиотеку типа lodash.get или что-то подобное (gist.github.com/harish2704/) для доступа к материалам без прерывания, если они недоступны.   -  person enapupe    schedule 27.11.2018

Ответы (1)


arrow_upward
0
arrow_downward

Хорошее эмпирическое правило заключается в разработке пространства состояний и пользовательского интерфейса таким образом, чтобы пустые массивы [] и пустые объекты {} имели осмысленное «представление» в качестве пользовательского интерфейса. Например, пустой список может привести к тому, что страница результатов поиска покажет No results.

Вторая хитрость заключается в том, чтобы указать состояние загрузки в режиме ленивой загрузки. Например, вы можете частично отобразить пользовательский интерфейс без фактических данных и показать элементы-заполнители, где данные все еще отсутствуют. Методик много: изучите свои любимые сайты и посмотрите, как они решают эту проблему.

Наконец, спросите себя об этом. Является ли URL-адрес тем, что отображается пользователю? Помните, что пользовательский интерфейс должен быть JSX + props + state. Если URL-адрес используется для запроса дополнительных данных, он принадлежит не пользовательскому интерфейсу, а промежуточному программному обеспечению, в котором нечистый код находится в архитектуре React/Redux.

person Elias Toivanen    schedule 26.11.2018