State Management - Redux

1-actions.ts

import { Action } from 'redux';

export enum TagActions {
    Search = 'TAGS_SEARCH',
    SearchUpdate = 'TAGS_SEARCH_UPDATE',
    SearchError = 'TAGS_SEARCH_ERROR',
}

export interface TagsSearchAction extends Action {
    type: TagActions.Search;
    query: string;
}

export interface TagsSearchUpdateAction extends Action {
    type: TagActions.SearchUpdate;
    results: string[];
}

export interface TagsSearchErrorAction extends Action {
    type: TagActions.Search;
    err: any;
}

export type TagsSearchActions = TagsSearchAction | TagsSearchUpdateAction | TagsSearchErrorAction;

2-action-creators.ts

import { ActionCreator } from 'redux';
import { TagActions } from './actions';

const search: ActionCreator<TagsSearchAction> =
    (query: string) => ({
        type: TagActions.Search,
        query,
    });

const searchUpdate: ActionCreator<TagsSearchUpdateAction> =
    (results: string[]) => ({
        type: TagActions.SearchUpdate,
        tags,
    });

const searchError: ActionCreator<TagsSearchErrorAction> =
    (err: any) => ({
        type: TagActions.SearchError,
        err,
    });

3-reducers.ts

import { Reducer } from 'redux';
import { TagSearchActions } from './actions';

export interface State {
    query: string;
    isLoading: boolean;
    results: string[];
}

const initialState: State = {
    query: '',
    isLoading: false,
    results: [],
};

export const tagSearchReducer: Reducer<State> =
    (state: State = initialState, action: TagsSearchActions) => {
        switch ((action as TagsSearchActions).type) {
            case TagActions.Search:
                return {
                    ...state,
                    isLoading: true,
                    query: (action as TagsSearchAction).query,
                };

            case TagActions.SearchUpdate:
                return {
                    ...state,
                    isLoading: false,
                    results: (action as TagsSearchUpdateAction).tags,
                };

            case TagActions.SearchError:
                return {
                    ...state,
                    isLoading: false,
                    results: (action as TagsSearchErrorAction).err,
                };

            default:
                return state;
        }
    };

4-home.tsx

import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { withRedux } from 'react-redux';

import * as TagActions from './action-creators'; 
import { HeaderProps } from './header';

export interface HomePageProps {
    headerProps?: HeaderProps;
}

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

const mapStateToProps = (state: State) => ({
    headerProps: {
        searchBoxProps: {
            isLoading: state.isLoading,
            results: state.results,
            query: state.query,
        }
    }
});
    
const mapDispatchToProps = (dispatch: Dispatch) => ({
    headerProps: {
        searchBoxProps: {
            onSearch: (query: string) => dispatch(TagActions.search(query)),
        }
    }
});
    
const connectedPage = connect(mapStateToProps, mapDispatchToProps)(HomePage);
    
const reducers = combineReducers({
    tagSearch: tagSearchReducer,
});

const makeStore = (initialState: State) => {
    return createStore(reducers, initialState);
}

export default withRedux(makeStore)(connectedPage);