Stores, reducers, and components

Building on these concepts, the final thing that we want you to look at is how this all fits together inside a Redux architecture.

Note

If you've skipped ahead to this chapter, make sure that you have a firm understanding of Redux by reading the previous chapter.

Let's begin with a PageComponent class (for individual pages, in a list):

import React from "react";

class PageComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = props.store.getState();
    }
    componentDidMount() {
        this.remove = this.props.store.register(
            this.onChange
        );
    }
    componentWillUnmount() {
        this.remove();
    }
    onChange() {
        this.setState(this.props.store.getState());
    }
    render() {
        const DummyPageViewComponent = use(
            "App/DummyPageViewComponent"
        );

        const DummyPageEditorComponent = use(
            "App/DummyPageEditorComponent"
        );...