reactredux/webapi/ClientApp/src/store/reducers/BlogCatalog.ts

import { Action, Reducer } from 'redux'
import { AppThunkAction } from '../'

import { GetBlogCatalogRequestModel } from '../../models/requests'
import { GetBlogCatalogResponseModel } from '../../models/responses'
import { Get } from '../../restClient'

export interface BlogCatalogState extends GetBlogCatalogResponseModel {
  isLoading: boolean
}

interface RequestAction extends GetBlogCatalogRequestModel {
  type: 'REQUEST_BLOG_CATALOG'
}

interface ReceiveAction extends GetBlogCatalogResponseModel {
  type: 'RECEIVE_BLOG_CATALOG'
}

type KnownAction = RequestAction | ReceiveAction

export const actionCreators = {
  requestBlogCatalog: (props?: GetBlogCatalogRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
    
    Get<Promise<GetBlogCatalogResponseModel>>('https://localhost:7151/api/BlogCatalog', props?.pathParams, props?.searchParams)
      .then(response => response)
      .then(data => {
        if(data)
          dispatch({ type: 'RECEIVE_BLOG_CATALOG', ...data })
      })

    dispatch({ type: 'REQUEST_BLOG_CATALOG' })
  }
}

const unloadedState: BlogCatalogState = {
  totalPages: 1,
  currentPage: 1,
  items: [
    {
      id: "",
      slug: "demo-post",
      badges: [ "demo" ],
      image: {
        src: "https://dummyimage.com/850x350/dee2e6/6c757d.jpg",
        alt: "..."
      },
      title: "Lorem ipsum",
      shortText: "",
      text: "",
      author: {
        id: "",
        nickName: "Admin",
        image: {
          src: "https://dummyimage.com/40x40/ced4da/6c757d",
          alt: "..."
        }
      },
      created: new Date().toString(),
      tags: [],
    
      likes: 0
    },
    {
      id: "",
      slug: "demo-post",
      badges: [ "demo" ],
      image: {
        src: "https://dummyimage.com/850x350/dee2e6/6c757d.jpg",
        alt: "..."
      },
      title: "Lorem ipsum",
      shortText: "",
      text: "",
      author: {
        id: "",
        nickName: "Admin",
        image: {
          src: "https://dummyimage.com/40x40/ced4da/6c757d",
          alt: "..."
        }
      },
      created: new Date().toString(),
      tags: [],
    
      likes: 0
    },
    {
      id: "",
      slug: "demo-post",
      badges: [ "demo" ],
      image: {
        src: "https://dummyimage.com/850x350/dee2e6/6c757d.jpg",
        alt: "..."
      },
      title: "Lorem ipsum",
      shortText: "",
      text: "",
      author: {
        id: "",
        nickName: "Admin",
        image: {
          src: "https://dummyimage.com/40x40/ced4da/6c757d",
          alt: "..."
        }
      },
      created: new Date().toString(),
      tags: [],
    
      likes: 0
    },
    {
      id: "",
      slug: "demo-post",
      badges: [ "demo" ],
      image: {
        src: "https://dummyimage.com/850x350/dee2e6/6c757d.jpg",
        alt: "..."
      },
      title: "Lorem ipsum",
      shortText: "",
      text: "",
      author: {
        id: "",
        nickName: "Admin",
        image: {
          src: "https://dummyimage.com/40x40/ced4da/6c757d",
          alt: "..."
        }
      },
      created: new Date().toString(),
      tags: [],
    
      likes: 0
    }
  ],
  isLoading: false
}

export const reducer: Reducer<BlogCatalogState> = (state: BlogCatalogState | undefined, incomingAction: Action): BlogCatalogState => {
  if (state === undefined) {
    return unloadedState
  }
  
  const action = incomingAction as KnownAction
  switch (action.type) {
    case 'REQUEST_BLOG_CATALOG':
      return {
        ...state,
        isLoading: true
      }

    case 'RECEIVE_BLOG_CATALOG':
      return {
        ...action,
        isLoading: false
      }
  }

  return state
}