Converts counter to redux-actions

Author: alexgorbatchev

package.json

@@ -35,6 +35,7 @@
     "gulp-util": "^3.0.7",
     "jsdom": "^8.2.0",
     "jsx-chai": "^2.0.0",
+    "mime": "^1.3.4",
     "mkdirp": "^0.5.1",
     "mocha": "^2.4.5",
     "mocha-clean": "^1.0.0",
@@ -67,6 +68,7 @@
     "immutable": "^3.7.6",
     "isomorphic-fetch": "^2.2.1",
     "lodash": "^4.6.1",
+    "normalizr": "^2.0.1",
     "object.assign": "^4.0.3",
     "radium": "^0.17.1",
     "react": "^0.14.8",
@@ -76,6 +78,8 @@
     "react-router": "^2.0.1",
     "react-router-redux": "^4.0.1",
     "redux": "^3.3.1",
-    "redux-thunk": "^2.0.1"
+    "redux-actions": "^0.9.1",
+    "redux-thunk": "^2.0.1",
+    "reselect": "^2.5.1"
   }
 }

src/components/BannerComponent-spec.tsx

@@ -1,14 +1,22 @@
 import { expect } from 'chai';
 import * as React from 'react';
-import * as TestUtils from 'react-addons-test-utils';
+import { createRenderer } from 'react-addons-test-utils';
 import BannerComponent, { BannerKind } from './BannerComponent';
 
 describe('BannerComponent', function() {
+  let renderer;
+
+  beforeEach(() => {
+    renderer = createRenderer();
+  });
+
   it('works', function() {
-    const instance = TestUtils.renderIntoDocument(
+    renderer.render(
       <BannerComponent kind={BannerKind.primary} />
     );
 
+    const instance = renderer.getRenderOutput();
+
     expect(instance).to.be.ok;
   });
 });

src/components/CounterComponent-spec.tsx

@@ -4,37 +4,38 @@ import * as React from 'react';
 import * as TestUtils from 'react-addons-test-utils';
 import CounterComponent, { CounterProps } from './CounterComponent';
 
-describe('CounterComponent', function() {
+describe('CounterComponent', () => {
   let props: CounterProps;
   let instance;
 
-  beforeEach(function() {
+  beforeEach(() => {
     props = {
       counter: { value: 0 },
-      increaseCounter: sinon.spy()
+      increaseCounter: sinon.spy(),
+      decreaseCounter: sinon.spy(),
     };
 
     instance = TestUtils.renderIntoDocument(<CounterComponent {...props} />);
   });
 
-  describe('interaction', function() {
-    it('triggers the action when increase button is clicked', function() {
+  describe('interaction', () => {
+    it('triggers the action when increase button is clicked', () => {
       TestUtils.Simulate.click(instance.refs.increase);
       expect(props.increaseCounter).to.have.been.calledWith(+1);
     });
 
-    it('triggers the action when decrease button is clicked', function() {
+    it('triggers the action when decrease button is clicked', () => {
       TestUtils.Simulate.click(instance.refs.decrease);
-      expect(props.increaseCounter).to.have.been.calledWith(-1);
+      expect(props.decreaseCounter).to.have.been.calledWith(1);
     });
   });
 
-  describe('display', function() {
-    it('renders initial value', function() {
+  describe('display', () => {
+    it('renders initial value', () => {
       expect(instance.refs.displayValue.innerHTML).to.equal(props.counter.value.toString());
     });
 
-    it('renders new value', function() {
+    it('renders new value', () => {
       props.counter.value = 100;
       instance.forceUpdate();
       expect(instance.refs.displayValue.innerHTML).to.equal('100');

src/components/CounterComponent.tsx

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

src/routes/root/components/ApplicationComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Link } from 'react-router';
 import { bindActionCreators } from 'redux';
-import * as counterActions from '../../../store/counter/actions';
+import { increaseCounter, decreaseCounter } from '../../../store/counter';
 import Counter from '../../../components/CounterComponent';
 
 declare const DEVELOPMENT;
@@ -11,7 +11,7 @@ const DevTools = DEVELOPMENT && require('../containers/DevToolsContainer').defau
 export default class ApplicationContainer extends React.Component<any, any> {
   render() {
     const { counter, dispatch } = this.props;
-    const boundCounterActions = bindActionCreators(counterActions, dispatch);
+    const boundCounterActions = bindActionCreators({ increaseCounter, decreaseCounter }, dispatch);
 
     return (
       <div>

src/store/counter/actions-spec.ts

@@ -1,9 +1,18 @@
 import { expect } from 'chai';
-import { INCREASE_COUNTER, ICounterAction, increaseCounter } from './';
+import { INCREASE_COUNTER, DECREASE_COUNTER, increaseCounter, decreaseCounter } from './';
 
-describe('counter-actions', function() {
-  it('creates an action to increase the counter', function() {
-    const expectedAction: ICounterAction = { type: INCREASE_COUNTER, amount: +1 };
-    expect(increaseCounter(+1)).to.eql(expectedAction);
-  });
+describe('counter-actions', () => {
+  it('increaseCounter', () =>
+    expect(increaseCounter(1)).to.eql({
+      type: INCREASE_COUNTER,
+      payload: { value: 1 }
+    })
+  );
+
+  it('decreaseCounter', () =>
+    expect(decreaseCounter(1)).to.eql({
+      type: DECREASE_COUNTER,
+      payload: { value: 1 }
+    })
+  );
 });

src/store/counter/actions.ts

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

src/store/counter/constants.ts

@@ -1 +1,2 @@
 export const INCREASE_COUNTER: string = 'INCREASE_COUNTER';
+export const DECREASE_COUNTER: string = 'DECREASE_COUNTER';

src/store/counter/reducer-spec.ts

@@ -1,9 +1,8 @@
 import { expect } from 'chai';
-import { ICounterAction, INCREASE_COUNTER, counterReducer } from './';
+import { counterReducer, increaseCounter, decreaseCounter } from './';
 
-const action = (amount: number = 0): ICounterAction => ({ type: INCREASE_COUNTER, amount });
-
-describe('counter-reducer', function() {
-  it('returns the initial state', () => expect(counterReducer(undefined, action())).to.eql({ value: 0 }));
-  it('handles INCREASE_COUNTER', () => expect(counterReducer({ value: 10 }, action(1))).to.eql({ value: 11 }));
+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 }));
 });

src/store/counter/reducer.ts

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

src/store/counter/state.ts

@@ -1,3 +1,3 @@
 export type ICounterState = {
   value: number;
-};
+}

src/store/index.ts

@@ -16,8 +16,11 @@ if (DEVELOPMENT) {
 }
 
 const reducer = combineReducers({
+  // entities: combineReducers({
+  //   posts: postsEntitiesReducer,
+  // }),
   counter: counterReducer,
-  colors: postsReducer,
+  posts: postsReducer,
   routing: routerReducer
 });
 const initialState = {};

tsd.json

@@ -64,6 +64,9 @@
     },
     "isomorphic-fetch/isomorphic-fetch.d.ts": {
       "commit": "d969b903d1fce89a5e43828ec68458b4f852db4d"
+    },
+    "redux-actions/redux-actions.d.ts": {
+      "commit": "544a35a10866b32afda9c7f029c0764558563f4f"
     }
   }
 }

webpack/config-vendor.ts

@@ -23,7 +23,9 @@ config.entry.vendor = [
   'react-router',
   'react-router-redux',
   'redux',
+  'redux-actions',
   'redux-thunk',
+  'reselect',
   'whatwg-fetch',
   'lodash',
 ];

webpack/source-map-fix.ts

@@ -18,4 +18,4 @@ module.exports = function (input, inputMap) {
   }
 
   callback(err, input, inputMap);
-}
+};