Merge pull request #2 from rodolfo2488/add-redux

Add redux

Author: athornburg

package.json

@@ -19,6 +19,14 @@
   "devDependencies": {
     "@types/enzyme": "^2.7.7",
     "@types/jasmine": "^2.5.47",
+    "@types/jest": "19.2.2",
+    "@types/react": "^15.0.21",
+    "@types/react-addons-test-utils": "0.14.18",
+    "@types/react-dom": "^15.5.0",
+    "@types/react-redux": "^4.4.38",
+    "@types/redux": "3.6.0",
+    "@types/redux-actions": "^1.2.3",
+    "@types/redux-logger": "^3.0.0",
     "awesome-typescript-loader": "^3.1.2",
     "cross-env": "4.0.0",
     "enzyme": "^2.8.0",
@@ -29,20 +37,22 @@
     "karma-chrome-launcher": "^2.0.0",
     "karma-typescript": "^3.0.0",
     "karma-typescript-preprocessor": "^0.3.1",
-    "react-addons-test-utils": "^15.5.1",
+    "react-addons-test-utils": "15.5.1",
     "react-hot-loader": "1.3.1",
+    "redux-actions": "2.0.2",
     "source-map-loader": "^0.2.1",
     "stylelint-webpack-plugin": "0.7.0",
-    "typescript": "^2.2.2",
+    "typescript": "^2.3.0",
     "webpack-dev-server": "^2.4.2",
     "webpack-merge": "4.1.0",
     "write-file-webpack-plugin": "4.0.2"
   },
   "dependencies": {
-    "@types/react": "^15.0.21",
-    "@types/react-dom": "^0.14.23",
     "react": "^15.5.3",
     "react-dom": "^15.5.3",
+    "react-redux": "5.0.4",
+    "redux": "3.6.0",
+    "redux-logger": "3.0.1",
     "webpack": "^2.3.3"
   },
   "jest": {

preprocessor.js

@@ -1,5 +1,5 @@
 const tsc = require('typescript');
-const tsConfig = require('./tsconfig.json');
+const tsConfig = require('./testUtils/tsconfig.json');
 
 module.exports = {
   process(src, path) {

src/Hello/Hello.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+
+import {connect, Dispatch} from "react-redux";
+import {bindActionCreators} from "redux";
+
+import Counter from "./containers/Counter";
+import {IRootState} from "../rootReducer";
+import actions from "./actions";
+
+export interface HelloProps {
+    counter: number,
+    actions: typeof actions
+}
+
+export class Hello extends React.Component<HelloProps, void> {
+    constructor(props: HelloProps) {
+        super(props);
+
+        this.increment = this.increment.bind(this);
+        this.decrement = this.decrement.bind(this);
+    }
+
+    increment() {
+        this.props.actions.incrementAction();
+    }
+
+    decrement() {
+        this.props.actions.decrementAction();
+    }
+
+    render() {
+        return <div>
+            <h1>Hello typescript and react!</h1>
+            <Counter
+                counter={this.props.counter}
+                decrement={this.decrement}
+                increment={this.increment}
+            />
+        </div>;
+    }
+}
+
+export const mapStateToProps = (state: IRootState) => {
+    return state.counters;
+};
+
+export const mapDispatchToProps = (dispatch: Dispatch<{}>) => {
+    return {
+        actions: bindActionCreators(actions, dispatch)
+    }
+};
+
+export default connect<any, any, any>(mapStateToProps, mapDispatchToProps)(Hello)

src/Hello/__test__/actions.test.ts

@@ -0,0 +1,19 @@
+import {actionTypes, default as actions} from "../actions";
+
+describe("incrementAction", () => {
+    it("returns action of type increment", () => {
+        let action = {
+            type: actionTypes.INCREMENT.toString()
+        };
+        expect(actions.incrementAction()).toEqual(action);
+    });
+});
+
+describe("decrementAction", () => {
+    it("returns action of type decrement", () => {
+        let action = {
+            type: actionTypes.DECREMENT.toString()
+        };
+        expect(actions.decrementAction()).toEqual(action);
+    });
+});

src/Hello/__test__/hello.test.tsx

@@ -0,0 +1,97 @@
+jest.mock("../actions");
+
+import * as React from "react";
+import {shallow, ShallowWrapper} from "enzyme";
+import {Dispatch} from "react-redux";
+import { ActionFunction0, Action } from "redux-actions";
+
+import {Hello, HelloProps, mapDispatchToProps, mapStateToProps} from "../Hello";
+import Counter from "../containers/Counter";
+import {IRootState} from "../../rootReducer";
+import {incrementAction, decrementAction} from "../actions";
+
+
+describe("Hello Component", () => {
+    let helloComponent: ShallowWrapper<Hello, any>;
+    let props: HelloProps;
+    let increment: ActionFunction0<Action<void>>;
+    let decrement: ActionFunction0<Action<void>>;
+
+    beforeEach(() => {
+        increment = jest.fn();
+        decrement = jest.fn();
+        props = {
+            counter: 2,
+            actions: {
+                incrementAction: increment,
+                decrementAction: decrement
+            }
+        } as HelloProps;
+
+        helloComponent = shallow(<Hello actions={props.actions} counter={props.counter} />);
+    });
+
+    it("says hello", () => {
+        expect(helloComponent.find("h1").text()).toContain("Hello typescript and react!");
+    });
+
+    describe("Counter component", () => {
+        it("shows the counter component", () => {
+            expect(helloComponent.find(Counter).length).toEqual(1);
+        });
+
+        it("passes counter property", () => {
+            expect(helloComponent.find(Counter).props().counter).toEqual(2);
+        });
+
+        it("passes functions of increment the counter", () => {
+            helloComponent.find(Counter).props().increment();
+            expect(increment).toBeCalled();
+        });
+
+        it("passes functions of decrement the counter", () => {
+            helloComponent.find(Counter).props().decrement();
+            expect(decrement).toBeCalled();
+        });
+    });
+
+    describe("mapStateToProps", () => {
+        it("maps the counter from the state", () => {
+            const counters: any = {
+                counter: 1
+            };
+
+            const state: IRootState = {
+                counters: counters
+            };
+
+            let props = mapStateToProps(state);
+
+            expect(props.counter).toBe(1);
+        });
+    });
+
+    describe("mapDispatchToProps", () => {
+        it("maps action functions to decrement the counter", () => {
+            decrementAction.mockReturnValue("you are going down, sorry!");
+            let dispatch: Dispatch<{}> = jest.fn();
+
+            let props = mapDispatchToProps(dispatch);
+            props.actions.decrementAction();
+
+            expect(decrementAction).toBeCalled();
+            expect(dispatch).toBeCalledWith("you are going down, sorry!");
+        });
+
+        it("maps action functions to increment the counter", () => {
+            incrementAction.mockReturnValue("you are going up, congratulations!");
+            let dispatch: Dispatch<{}> = jest.fn();
+
+            let props = mapDispatchToProps(dispatch);
+            props.actions.incrementAction();
+
+            expect(incrementAction).toBeCalled();
+            expect(dispatch).toBeCalledWith("you are going up, congratulations!");
+        });
+    });
+});

src/Hello/actions.ts

@@ -0,0 +1,23 @@
+import {createAction} from "redux-actions";
+
+export enum actionTypes {
+    INCREMENT,
+    DECREMENT
+}
+
+export const incrementAction = createAction<void>(
+    actionTypes.INCREMENT.toString(),
+    () => {
+    }
+);
+
+export const decrementAction = createAction<void>(
+    actionTypes.DECREMENT.toString(),
+    () => {
+    }
+);
+
+export default {
+    decrementAction,
+    incrementAction
+}

src/Hello/containers/Counter.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import DefaultState from "../interfaces/defaultState"
+
+export interface IProps extends DefaultState {
+    increment(): void;
+    decrement(): void;
+}
+
+const Counter = (props: IProps) => {
+    const { counter, increment, decrement } = props;
+
+    return (
+        <div>
+            <p>Counter: {counter}</p>
+            <button onClick={increment} label="Increment" id="increment"/>
+            <button onClick={decrement} label="Decrement" id="decrement"/>
+        </div>
+    );
+};
+
+export default Counter;

src/Hello/containers/__test__/Counter.test.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import {shallow} from "enzyme";
+
+import Counter from "../Counter";
+
+describe("counter container", () => {
+    let subject: any,
+        mockIncrement: () => {},
+        mockDecrement: () => {};
+    beforeEach(() => {
+        mockIncrement = jest.fn();
+        mockDecrement = jest.fn();
+        subject = shallow(<Counter increment={mockIncrement} decrement={mockDecrement} counter={1}/>);
+    });
+
+    it("it shows the counter", () => {
+        expect(subject.text()).toContain("1");
+    });
+
+    it("clicking on the increment button call property increment", () => {
+        subject.find("#increment").props().onClick();
+
+        expect(mockIncrement).toBeCalled();
+    });
+
+    it("clicking on the decrement button call property decrement", () => {
+        subject.find("#decrement").props().onClick();
+
+        expect(mockDecrement).toBeCalled();
+    });
+});

src/Hello/interfaces/defaultState.ts

@@ -0,0 +1,5 @@
+interface DefaultState {
+    readonly counter: number
+}
+
+export default DefaultState;

src/Hello/reducer.ts

@@ -0,0 +1,20 @@
+import { handleActions, Action } from "redux-actions";
+import { actionTypes } from "./actions";
+import DefaultState from "./interfaces/defaultState";
+
+const initialState: DefaultState = {
+    counter: 0
+};
+
+export default handleActions<DefaultState, void>({
+    [actionTypes.INCREMENT.toString()]: (state: DefaultState, action: Action<void>): DefaultState => {
+        return {
+            counter: state.counter + 1
+        };
+    },
+    [actionTypes.DECREMENT.toString()]: (state: DefaultState, action: Action<void>): DefaultState => {
+        return {
+            counter: state.counter - 1
+        };
+    },
+}, initialState);