Converts counter away from redux-actions

Author: alexgorbatchev

src/components/CounterComponent-spec.tsx

@@ -10,7 +10,7 @@ describe('CounterComponent', () => {
 
   beforeEach(() => {
     props = {
-      counter: { value: 0 },
+      counter: 0,
       increaseCounter: sinon.spy(),
       decreaseCounter: sinon.spy(),
     };
@@ -32,11 +32,11 @@ describe('CounterComponent', () => {
 
   describe('display', () => {
     it('renders initial value', () => {
-      expect(instance.refs.displayValue.innerHTML).to.equal(props.counter.value.toString());
+      expect(instance.refs.displayValue.innerHTML).to.equal(props.counter.toString());
     });
 
     it('renders new value', () => {
-      props.counter.value = 100;
+      props.counter = 100;
       instance.forceUpdate();
       expect(instance.refs.displayValue.innerHTML).to.equal('100');
     });

src/components/CounterComponent.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { ICounterState } from '../store/counter';
 
 export interface CounterProps {
-  increaseCounter(amount: number);
-  decreaseCounter(amount: number);
+  increaseCounter();
+  decreaseCounter();
   counter: ICounterState;
 }
 
@@ -13,9 +13,9 @@ export default class CounterComponent extends React.Component<CounterProps, any>
 
     return (
       <div>
-        value????: <span ref="displayValue">{this.props.counter.value}</span>
-        <button ref="increase" onClick={() => increaseCounter(+1) }>increase</button>
-        <button ref="decrease" onClick={() => decreaseCounter(1) }>decrease</button>
+        value????: <span ref="displayValue">{this.props.counter}</span>
+        <button ref="increase" onClick={() => increaseCounter() }>increase</button>
+        <button ref="decrease" onClick={() => decreaseCounter() }>decrease</button>
       </div>
     );
   }

src/store/counter/actions-spec.ts

@@ -1,18 +1,18 @@
 import { expect } from 'chai';
 import { INCREASE_COUNTER, DECREASE_COUNTER, increaseCounter, decreaseCounter } from './';
 
-describe('counter-actions', () => {
+describe('counter / actions', () => {
   it('increaseCounter', () =>
-    expect(increaseCounter(1)).to.eql({
+    expect(increaseCounter()).to.eql({
       type: INCREASE_COUNTER,
-      payload: { value: 1 }
+      payload: 1,
     })
   );
 
   it('decreaseCounter', () =>
-    expect(decreaseCounter(1)).to.eql({
+    expect(decreaseCounter()).to.eql({
       type: DECREASE_COUNTER,
-      payload: { value: 1 }
+      payload: -1,
     })
   );
 });

src/store/counter/actions.ts

@@ -1,6 +1,15 @@
-import { INCREASE_COUNTER, DECREASE_COUNTER } from './constants';
-import { ICounterState } from './state';
-import { createAction } from 'redux-actions';
+import { INCREASE_COUNTER, DECREASE_COUNTER, ICounterAction } from './types';
 
-export const increaseCounter = createAction<number, ICounterState>(INCREASE_COUNTER, value => ({ value }));
-export const decreaseCounter = createAction<number, ICounterState>(DECREASE_COUNTER, value => ({ value }));
+export function increaseCounter(): ICounterAction {
+  return {
+    type: INCREASE_COUNTER,
+    payload: 1,
+  };
+}
+
+export function decreaseCounter(): ICounterAction {
+  return {
+    type: DECREASE_COUNTER,
+    payload: -1,
+  };
+}

src/store/counter/constants.ts

@@ -1,4 +1,3 @@
 export * from './actions';
-export * from './state';
-export * from './constants';
+export * from './types';
 export * from './reducer';

src/store/counter/index.ts

@@ -1,8 +1,8 @@
 import { expect } from 'chai';
 import { counterReducer, increaseCounter, decreaseCounter } from './';
 
-describe.only('counter-reducer', () => {
-  it('sets the initial state', () => expect(counterReducer(undefined, increaseCounter(1))).to.eql({ value: 1 }));
-  it('handles INCREASE_COUNTER', () => expect(counterReducer({ value: 10 }, increaseCounter(1))).to.eql({ value: 11 }));
-  it('handles DECREASE_COUNTER', () => expect(counterReducer({ value: 10 }, decreaseCounter(1))).to.eql({ value: 9 }));
+describe('counter / reducer', () => {
+  it('sets the initial state', () => expect(counterReducer(undefined, increaseCounter())).to.eql(1));
+  it('handles INCREASE_COUNTER', () => expect(counterReducer(10, increaseCounter())).to.eql(11));
+  it('handles DECREASE_COUNTER', () => expect(counterReducer(10, decreaseCounter())).to.eql(9));
 });

src/store/counter/reducer-spec.ts

@@ -1,16 +1,16 @@
-import { INCREASE_COUNTER, DECREASE_COUNTER, ICounterState } from './';
-import { handleActions } from 'redux-actions';
+import { INCREASE_COUNTER, DECREASE_COUNTER, ICounterState, ICounterAction } from './types';
 
-const initialState: ICounterState = {
-  value: 0
-};
+const initialState: ICounterState = 0;
 
-export const counterReducer = handleActions<ICounterState>({
-  [INCREASE_COUNTER]: (state, action) => ({
-    value: state.value + action.payload.value
-  }),
+function updateCounter(state: ICounterState, action: ICounterAction): ICounterState {
+  return state + action.payload;
+}
 
-  [DECREASE_COUNTER]: (state, action) => ({
-    value: state.value - action.payload.value
-  }),
-}, initialState);
+export function counterReducer(state: ICounterState = initialState, action: ICounterAction): ICounterState {
+  switch (action.type) {
+    case INCREASE_COUNTER: return updateCounter(state, action);
+    case DECREASE_COUNTER: return updateCounter(state, action);
+  }
+
+  return state;
+}

src/store/counter/reducer.ts

@@ -0,0 +1,7 @@
+import { IPayloadAction } from '../interfaces';
+
+export type ICounterState = number;
+export interface ICounterAction extends IPayloadAction<ICounterState> { }
+
+export const INCREASE_COUNTER: string = 'INCREASE_COUNTER';
+export const DECREASE_COUNTER: string = 'DECREASE_COUNTER';