Реагировать: Redux состояние и отношения - PullRequest
Новая
       23

Реагировать: Redux состояние и отношения

2 голосов
/ 22 апреля 2019

Я разрабатываю приложение реакции типа GUI администратора.Я использую 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, либо на уровне компонентов?

...