title: React: Redux state and relations
body: <p>I'm developing admin GUI type react application. I'm using Redux to store the application state, mainly the API call status and domain objects. The domain model has dozen of entity types and the amount of data is very small.</p>
  
  <p>I wanted to avoid nesting and keep the state normalized to avoid cyclic references. I designed the REST API to return data in normalized form. Currently the state structure is as follows:</p>
  
  <pre><code>{
    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
    },
    ...
  }
  </code></pre>
  
  <p>Basically the state reflects the database. Now it's responsibility of a UI component to perform the "joins" on this data. Here is an pseudo-example:</p>
  
  <pre><code>// 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 (
        &lt;div&gt;
          { this.props.foos.map(f =&gt;
            &lt;Foo bars={this.props.bars.filter(b =&gt; b.fooId === f.id)} /&gt;) 
          }
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Is this solution fine in general, or should I reconsider the join logic and maybe shape the state at more fine-grained level either at Redux store or component level?</p>