Added redux without tests

Author: dolfolife

package.json

@@ -19,6 +19,12 @@
   "devDependencies": {
     "@types/enzyme": "^2.7.7",
     "@types/jasmine": "^2.5.47",
+    "@types/react": "^15.0.21",
+    "@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",
@@ -31,18 +37,21 @@
     "karma-typescript-preprocessor": "^0.3.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",
+    "typemoq": "1.4.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__/hello.test.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+// import * as TypeMoq from "typemoq";
+
+import {shallow, ShallowWrapper} from "enzyme";
+import {Hello, HelloProps} from "../Hello";
+
+describe("Hello Component", () => {
+    let helloComponent: ShallowWrapper<Hello, any>;
+    // let props: TypeMoq.IMock<HelloProps> = TypeMoq.Mock.ofType<HelloProps>();
+
+    beforeEach(() => {
+        // helloComponent = shallow(<Hello actions={props.actions} counter={props.counter} />);
+    });
+
+    it("says hello", () => {
+        // expect(helloComponent.find("h1").text()).toContain("Hello typescript and react!");
+    });
+});

src/Hello/actions.ts

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

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" />
+            <button onClick={decrement} label="Decrement" />
+        </div>
+    );
+};
+
+export default Counter;

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);

src/configureStore.ts

@@ -0,0 +1,12 @@
+import { Store, createStore, applyMiddleware } from 'redux';
+import logger from 'redux-logger';
+import reducer from './rootReducer';
+
+const store = (): Store<any> => {
+    return createStore(
+        reducer,
+        applyMiddleware(logger)
+    );
+};
+
+export default store;

src/index.tsx

@@ -1,9 +1,14 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+import { Provider } from 'react-redux';
 
-import { Hello } from "./main/hello";
+import configureStore from "./configureStore";
+import Hello from "./Hello/Hello";
 
+const store = configureStore();
 ReactDOM.render(
-    <Hello/>,
+    <Provider store={store}>
+        <Hello/>
+    </Provider>,
     document.getElementById("hello")
 );