Блог

Я разрабатываю приложение с реактивным интерфейсом администратора. Я использую Redux для хранения состояния приложения, в основном статуса вызова API и объектов домена. Модель предметной области содержит дюжину типов сущностей, а объем данных очень мал.

Я хотел избежать вложенности и сохранить нормализованное состояние, чтобы избежать циклических ссылок. Я разработал REST API для возврата данных в нормализованном виде. В настоящее время структура состояния выглядит следующим образом:

 {
  Foo: {
     byId {
       1: { id: 1, ... },
       2: { id: 2, ... },
       ...
     },
     isLoading: false
     isError: false
  },

  Bar: {
     byId {
       1: { id: 1, fooId: 1, ... },
       2: { id: 2, fooId: 2, ... },
       ...
     },
     isLoading: false
     isError: false
  },
  ...
}
  

В основном состояние отражает базу данных. Теперь ответственность за выполнение «соединений» с этими данными лежит на компоненте пользовательского интерфейса. Вот псевдопример:

 // Redux connect omitted
FooListingComponent extends Component {

  // Redux-thunk actions
  componentDidMount() {
    this.props.getFoos() 
    this.props.getBars()
  }

  // Props comes from redux
  // Loading and error handling omitted
  render() {
    return (
      <div>
        { this.props.foos.map(f =>
          <Foo bars={this.props.bars.filter(b => b.fooId === f.id)} />) 
        }
      </div>
    )
  }
}
  

Подходит ли это решение в целом, или мне следует пересмотреть логику объединения и, возможно, сформировать состояние на более детальном уровне либо на уровне хранилища Redux, либо на уровне компонента?