improved reducer types using redux-actions

Author: piotrwitek

src/containers/currency-converter-container/index.tsx

@@ -4,16 +4,16 @@ import { Action } from 'redux-actions';
 import { connect } from 'react-redux';
 // components imports
 import { IRootReducer } from '../../store';
-import { ICurrencyRates } from '../../store/currency-rates-reducer';
-import { ICurrencyConverter } from '../../store/currency-converter-reducer';
+import { ICurrencyRatesReducer } from '../../store/currency-rates-reducer';
+import { ICurrencyConverterReducer } from '../../store/currency-converter-reducer';
 import { PageHeader } from '../../components/page-header';
 import { PageSection } from '../../components/page-section';
 import * as currencyConverterActions from '../../store/currency-converter-reducer';
 import { CurrencyConverter } from './components/currency-converter';
 
 interface IProps {
-  currencyRates: ICurrencyRates;
-  currencyConverter: ICurrencyConverter;
+  currencyRates: ICurrencyRatesReducer;
+  currencyConverter: ICurrencyConverterReducer;
   updateBaseCurrency: (payload: string) => Action<string>;
   updateBaseValue: (payload: string) => Action<string>;
   updateTargetCurrency: (payload: string) => Action<string>;
@@ -25,7 +25,8 @@ interface IState {
 export class CurrencyConverterContainer extends React.Component<IProps, IState> {
   render() {
     const { baseCurrency, targetCurrency, baseValue, targetValue } = this.props.currencyConverter;
-    const { currencies } = this.props.currencyRates;
+    const { rates } = this.props.currencyRates;
+    const currencies = Object.keys(rates);
     const { updateBaseCurrency, updateBaseValue, updateTargetCurrency, updateTargetValue } = this.props;
 
     return (

src/store/currency-converter-reducer.tsx

@@ -14,13 +14,13 @@ export const updateBaseValue = createAction<string>(UPDATE_BASE_VALUE);
 export const updateTargetValue = createAction<string>(UPDATE_TARGET_VALUE);
 
 // Reducer
-export interface ICurrencyConverter {
+export interface ICurrencyConverterReducer {
   baseCurrency: string;
   targetCurrency: string;
   baseValue: string;
   targetValue: string;
 }
-const initialState: ICurrencyConverter = {
+const initialState: ICurrencyConverterReducer = {
   baseCurrency: 'PLN',
   targetCurrency: 'SEK',
   baseValue: '0',

src/store/currency-rates-reducer.tsx

@@ -1,55 +1,52 @@
-import { createAction, Action } from 'redux-actions';
+import { createAction, handleActions, Action } from 'redux-actions';
 import * as Immutable from 'seamless-immutable';
 
-const RATES_MOCK = { 'PLN': 1, 'SEK': 2.1919 };
+const RESPONSE_MOCK: IFixerServiceResponse = {
+  base: 'PLN',
+  date: Date.now().toString(),
+  rates: { 'PLN': 1, 'SEK': 2.1919 },
+};
 
 // Action Types - LOAD, CREATE, UPDATE, REMOVE
 const LOAD_CURRENCY_RATES = 'currencyRates/LOAD_CURRENCY_RATES';
 const LOAD_CURRENCY_RATES_SUCCESS = 'currencyRates/LOAD_CURRENCY_RATES_SUCCESS';
 const LOAD_CURRENCY_RATES_ERROR = 'currencyRates/LOAD_CURRENCY_RATES_ERROR';
 
 // Action Creators
-export const loadCurrencyRates = createAction(LOAD_CURRENCY_RATES);
-export const loadCurrencyRatesSuccess = createAction(LOAD_CURRENCY_RATES_SUCCESS);
-export const loadCurrencyRatesError = createAction(LOAD_CURRENCY_RATES_ERROR);
+export const loadCurrencyRates = createAction<void>(LOAD_CURRENCY_RATES);
+export const loadCurrencyRatesSuccess = createAction<IFixerServiceResponse>(LOAD_CURRENCY_RATES_SUCCESS);
+export const loadCurrencyRatesError = createAction<string>(LOAD_CURRENCY_RATES_ERROR);
+
 
 // Reducer
-export interface ICurrencyRates {
+export interface ICurrencyRatesReducer {
   isLoading: boolean;
   errorMessage: string | null;
   lastUpdated: Date | null;
   base: string;
   rates: any;
-  currencies: string[];
 }
-const initialState: ICurrencyRates = {
+
+const initialState = Immutable.from<ICurrencyRatesReducer>({
   isLoading: false,
   errorMessage: null,
   lastUpdated: null,
   base: 'PLN',
-  rates: RATES_MOCK,
-  currencies: Object.keys(RATES_MOCK)
-};
-
-export default function reducer(state = Immutable.from(initialState), action: Action<any>) {
-  switch (action.type) {
-    case LOAD_CURRENCY_RATES:
-      return state.merge({
-        isLoading: true
-      });
-    case LOAD_CURRENCY_RATES_SUCCESS:
-      return state.merge({
-        isLoading: false,
-        errorMessage: null,
-        results: action.payload,
-        lastUpdated: Date.now()
-      });
-    case LOAD_CURRENCY_RATES_ERROR:
-      return state.merge({
-        isLoading: false,
-        errorMessage: action.payload
-      });
+  rates: RESPONSE_MOCK.rates,
+});
 
-    default: return state;
-  }
-}
+export default handleActions<any, any>({
+  [LOAD_CURRENCY_RATES]: (state: typeof initialState, action: Action<void>) => state.merge({
+    isLoading: true,
+  }),
+  [LOAD_CURRENCY_RATES_SUCCESS]: (state: typeof initialState, action: Action<IFixerServiceResponse>) => state.merge({
+    isLoading: false,
+    errorMessage: null,
+    rates: action.payload && action.payload.rates,
+    lastUpdated: Date.now(),
+  }),
+  [LOAD_CURRENCY_RATES_ERROR]: (state: typeof initialState, action: Action<string>) => state.merge({
+    isLoading: false,
+    errorMessage: action.payload,
+  }),
+}, initialState);

src/store/index.tsx

@@ -4,16 +4,16 @@ import { routerReducer } from 'react-router-redux';
 import { createStore } from 'redux';
 
 import {
-  default as currencyRatesReducer, ICurrencyRates
+  default as currencyRatesReducer, ICurrencyRatesReducer
 } from './currency-rates-reducer';
 import {
-  default as currencyConverterReducer, ICurrencyConverter
+  default as currencyConverterReducer, ICurrencyConverterReducer
 } from './currency-converter-reducer';
 
 export interface IRootReducer {
   routing: any;
-  currencyRates: ICurrencyRates;
-  currencyConverter: ICurrencyConverter;
+  currencyRates: ICurrencyRatesReducer;
+  currencyConverter: ICurrencyConverterReducer;
 }
 
 export const rootReducer = combineReducers({