Начальное состояние глубоко вложенных объектов в Redux? - PullRequest
Новая
       5

Начальное состояние глубоко вложенных объектов в Redux?

0 голосов
/ 27 ноября 2018

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

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

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

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

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

1 Ответ

0 голосов
/ 27 ноября 2018

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

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

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

...