Redux + TypeScript

header.ts

import {
  createAction,
  createStandardAction,
  ActionType,
} from 'typesafe-actions';
import { createReducer } from '../utils';

const SET_KEYWORD = 'header/SET_KEYWORD';

export const setKeyword = createStandardAction(SET_KEYWORD)<string>();

type SetKeyword = ReturnType<typeof setKeyword>;

export interface HeaderState {
  keyword: string;
}

const initialState: HeaderState = {
  keyword: '',
};

const reducer = createReducer<HeaderState>(
  {
    [SET_KEYWORD]: (state, { payload }: SetKeyword) => {
      return {
        ...state,
        keyword: payload,
      };
    },
  },
  initialState,
);

export default reducer;

utils.ts

export type Handlers<T> = {
  [type: string]: (state: T, action: any) => T;
};

export function createReducer<S>(handlers: Handlers<S>, initialState: S) {
  return (state: S = initialState, action: AnyAction) => {
    const handler = handlers[action.type];
    if (handler) return handler(state, action);
    return state;
  };
}