redux work example

1) item-list-store

import { isType } from 'typescript-fsa';
import { Reducer } from 'redux';
import * as actions from './actions';

/**
 * Item-List local store
 */

export interface LocalState {
  isDeleting: boolean;
  isRefetching: boolean;
  selectedItems: string[];
  showAll: boolean;
  searchString: string;
}

export const initialState: LocalState = {
  isDeleting: false,
  isRefetching: false,
  selectedItems: [],
  showAll: false,
  searchString: ''
};

export const localReducer: Reducer<LocalState> = (state, action) => {
  if (isType(action, actions.startDeleting)) {
    return { ...state, isDeleting: true };
  }

  else if (isType(action, actions.stopDeleting)) {
    return { ...state, isDeleting: false };
  }

  else if (isType(action, actions.clearSelected)) {
    return { ...state, selectedItems: [] };
  }

  else if (isType(action, actions.selectItem)) {
    return {
      ...state,
      selectedItems: state.selectedItems.includes(action.payload.id)
        ? state.selectedItems.filter(f => f !== action.payload.id)
        : [...state.selectedItems, action.payload.id]
    };
  }

  else if (isType(action, actions.setShowAll)) {
    return { ...state, showAll: action.payload };
  }

  else if (isType(action, actions.search)) {
    return { ...state, searchString: action.payload };
  }

  else if (isType(action, actions.startedRefetching)) {
    return { ...state, isRefetching: true };
  }

  else if (isType(action, actions.stoppedRefetching)) {
    return { ...state, isRefetching: false };
  }

  else {
    return state;
  }
};

2) item-list action

import actionCreatorFactory from 'typescript-fsa';

/**
 * Item-list Actions
 */

const create =  actionCreatorFactory('@@local/shared');

export const selectItem = create<{id: string}>('SELECT_ITEM');
export const clearSelected = create('CLEAR_SELECTED');
export const startDeleting = create('START_DELETING');
export const stopDeleting = create('STOP_DELETING');

export const setShowAll = create<boolean>('SHOW_ACTIVE');
export const search = create<string>('SEARCH');

export const startedRefetching = create('STARTED_REFETCHING');
export const stoppedRefetching = create('STOPPED_REFETCHING');

3) custom middleware

import { actions } from 'redux-notifications';
const { notifSend } = actions;


const notifSuccess = (message: string) => notifSend({
  message,
  kind: 'success',
  dismissAfter: 2000
});

const notifError = (message: string) => notifSend({
  message,
  kind: 'danger',
  dismissAfter: 2000
});

/**
 * Shows notifications when necessary
 */
export const notifMiddleware = ({ getState, dispatch }) => next => action => {

  if (action.type.includes('SET_SUBMIT_SUCCEEDED')) {
    dispatch(notifSuccess('Saved'));
  }

  if (action.type.includes('SET_SUBMIT_FAILED')) {
    dispatch(notifError('Saving failed'));
  }

  next(action);
};