Connect your componentsΒΆ

As the state tree is now normalized you are likely to denormalize your data for your views. Example given in react:

import { Component } from "react";
import { connect } from "react-redux";
import { db } from "./schema";

class PostListComponent extends Component {
    render() {
        return <table>
            <tbody>
                {this.props.posts.map(post => (
                    <tr>
                        <td>{post.title}</td>
                        <td>{post.author}</td>
                        <td>{post.numComments}</td>
                    </tr>
                ) }
            </tbody>
        </table>;
    }
}

const mapStateToProps = (state, ownProps) => {
    const { BlogPost } = db.selectTables(state.db);

    return {
        posts: BlogPost.all().map(post => ({
            ...post.value,
            numComments: post.comments.length,
            author: post.author.value.name
        }))
    };
};

export const PostList = connect(mapStateToProps)(PostListComponent);

Warning

This is all well and good, but as your state tree and application grows you should definitely switch to using memoized selectors (eg. reselect ).