State Management - MST

1-store.ts

import { flow, types } from 'mobx-state-tree';

export const TagsStoreModel = types
    .model('TagsStore', {
        results: types.array(types.string),
        isLoading: types.boolean,
        query: types.string,
    })
    .actions((self) => ({
        loadTags: flow(function * (query: string) {
            self.query = query;
            self.isLoading = true;

            try {
                const tags = yield fetch('http://somewhere.com/api/tags');
                self.tags = tags;
            } catch (err) {
                self.err = err;
            }

            self.isLoading = false;
        }
    }));

export const StoreModel = types
    .model('Store', {
        tags: TagsStoreModel,
    });

export type Store = typeof StoreModel.Type;

2-home.tsx

import { Header, HeaderProps } from './header';
import { Provider, inject } from 'mobx-react';

export interface HomePageProps {
    headerProps?: HeaderProps;
}

export class HomePage extends Component<IndexPageProps> {
    render() {
        return (
            <Header {...this.props.headerProps} />
            <!-- the rest of the page .. -->
        );
    }
}

export const ConnectedHomePage = inject(({ tags }: Store) => ({
    headerProps: {
        searchBoxProps: {
            query: tags.query,
            isLoading: tags.isLoading,
            data: tags.data,
            onSearch: tags.loadTags,
        }
    }
}));

export const tagsStore = new TagsStore();
        
export default () => {
    return (
        <Provider tags={tagsStore}>
            <ConnectedHomePage>
        </Provider>
    );
}