feat: redux integration and example

Author: AKPWebDesign

react/globals.d.ts

@@ -7,3 +7,9 @@
 declare module '*.svg'
 declare module '*.png'
 declare module '*.jpg'
+
+// window.__REDUX_DEVTOOLS_EXTENSION__, for redux dev tools compatibility
+declare interface Window {
+  __REDUX_DEVTOOLS_EXTENSION__: any,
+  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any
+}

react/package.json

@@ -27,6 +27,10 @@
     "react": "^16.3.1",
     "react-dev-utils": "4.2.1",
     "react-dom": "^16.3.1",
+    "react-redux": "^5.0.7",
+    "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.2.0",
     "source-map-loader": "^0.2.1",
     "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "0.11.4",
@@ -35,6 +39,7 @@
     "tsconfig-paths-webpack-plugin": "^2.0.0",
     "tslint": "^5.7.0",
     "tslint-react": "^3.2.0",
+    "typesafe-actions": "^1.1.2",
     "uglifyjs-webpack-plugin": "^1.1.8",
     "url-loader": "0.6.2",
     "webpack": "3.8.1",
@@ -61,6 +66,8 @@
     "@types/node": "^9.6.2",
     "@types/react": "^16.3.5",
     "@types/react-dom": "^16.0.4",
+    "@types/react-redux": "^5.0.15",
+    "@types/redux-logger": "^3.0.5",
     "concurrently": "^3.5.1",
     "serve": "^6.5.3",
     "tslint-config-prettier": "^1.10.0",

react/src/App.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Counter from './components/counter';
 import './App.css';
 
 import logo from './logo.svg';
@@ -14,6 +15,7 @@ class App extends React.Component {
         <p className="App-intro">
           To get started, edit <code>src/App.tsx</code> and save to reload.
         </p>
+        <Counter />
       </div>
     );
   }

react/src/components/counter.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { ActionCreators as Actions, IState } from '../modules';
+
+interface ICounterProps {
+  counter: number,
+  increment(): void,
+  decrement(): void,
+  reset(): void,
+  add(amount: number): void,
+  sub(amount: number): void,
+};
+
+class CounterComponent extends React.Component<ICounterProps, any> {
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      inputVal: 5
+    }
+
+    this.props = props;
+
+    this.handleValueChange = this.handleValueChange.bind(this);
+    this.add = this.add.bind(this);
+    this.sub = this.sub.bind(this);
+  }
+
+  handleValueChange(event: any) {
+    this.setState({ inputVal: event.target.value });
+  }
+
+  add() {
+    this.props.add(this.state.inputVal);
+  }
+
+  sub() {
+    this.props.sub(this.state.inputVal);
+  }
+
+  render() {
+    return (
+      <div>
+        <p>{this.props.counter}</p>
+        <p>
+          <button onClick={this.props.decrement}>-</button>
+          &nbsp;|&nbsp;
+          <button onClick={this.props.increment}>+</button>
+        </p>
+        <p><button onClick={this.props.reset}>Reset</button></p>
+        <p>
+          <input type="number" value={this.state.inputVal} onChange={this.handleValueChange} />
+        </p>
+        <p>
+          <button onClick={this.add}>Add {this.state.inputVal} to counter</button>&nbsp;
+          <button onClick={this.sub}>Subtract {this.state.inputVal} from counter</button>
+        </p>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (state: IState) => ({
+  counter: state.example.counter
+});
+
+const mapDispatchToProps = (dispatch: any) => (
+  bindActionCreators({
+    increment: Actions.example.incrementCounter,
+    decrement: Actions.example.decrementCounter,
+    reset: Actions.example.resetCounter,
+    add: Actions.example.addToCounter,
+    sub: Actions.example.subtractFromCounter,
+  }, dispatch)
+);
+
+const Counter = connect(mapStateToProps, mapDispatchToProps)(CounterComponent);
+
+export default Counter;

react/src/index.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
+import store from './utils/store';
 import './index.css';
 
 ReactDOM.render(
-  <App />,
+  (<Provider store={store}>
+    <App />
+  </Provider>),
   document.getElementById('root') as HTMLElement
 );
+
 registerServiceWorker();

react/src/modules/example.ts

@@ -0,0 +1,69 @@
+import { createAction } from 'typesafe-actions';
+
+export interface IExampleState {
+  readonly counter: number,
+};
+
+export enum Actions {
+  IncrementCounter = 'INCREMENT_COUNTER',
+  DecrementCounter = 'DECREMENT_COUNTER',
+  AddToCounter = 'ADD_TO_COUNTER',
+  SubtractFromCounter = 'SUBTRACT_FROM_COUNTER',
+  ResetCounter = 'RESET_COUNTER'
+};
+
+const incrementCounter = createAction(Actions.IncrementCounter);
+
+const decrementCounter = createAction(Actions.DecrementCounter);
+
+const addToCounter = createAction(Actions.AddToCounter, (amount: number) => ({
+  type: Actions.AddToCounter,
+  payload: amount,
+}));
+
+const subtractFromCounter = createAction(Actions.SubtractFromCounter, (amount: number) => ({
+  type: Actions.SubtractFromCounter,
+  payload: amount,
+}));
+
+const resetCounter = createAction(Actions.ResetCounter);
+
+export const ActionCreators = {
+  incrementCounter,
+  decrementCounter,
+  addToCounter,
+  subtractFromCounter,
+  resetCounter,
+};
+
+const initialState: IExampleState = {
+  counter: 0,
+};
+
+const example = (state: IExampleState = initialState, action: any) => {
+  switch(action.type) {
+    case Actions.IncrementCounter: {
+      const counter = state.counter + 1;
+      return { counter };
+    }
+    case Actions.DecrementCounter: {
+      const counter = state.counter - 1;
+      return { counter };
+    }
+    case Actions.AddToCounter: {
+      const counter = state.counter + Number(action.payload);
+      return { counter };
+    }
+    case Actions.SubtractFromCounter: {
+      const counter = state.counter - Number(action.payload);
+      return { counter };
+    }
+    case Actions.ResetCounter: {
+      return { counter: 0 };
+    }
+    default:
+      return state;
+  }
+}
+
+export default example;

react/src/modules/index.ts

@@ -0,0 +1,24 @@
+import { combineReducers } from 'redux';
+import example, {
+  Actions as ExampleActions,
+  ActionCreators as ExampleActionCreators,
+  IExampleState,
+} from './example';
+
+const reducers = combineReducers({
+  example,
+});
+
+export default reducers;
+
+export const Actions = {
+  example: ExampleActions
+};
+
+export const ActionCreators = {
+  example: ExampleActionCreators
+}
+
+export interface IState {
+  example: IExampleState
+};

react/src/utils/store.ts

@@ -0,0 +1,19 @@
+import { applyMiddleware, compose, createStore } from 'redux';
+import { createLogger } from 'redux-logger';
+import thunkMiddleware from 'redux-thunk';
+import reducers from '../modules';
+
+const middlewares: any[] = [thunkMiddleware];
+
+if (process.env.NODE_ENV === 'development') {
+  const loggerMiddleware = createLogger();
+  middlewares.push(loggerMiddleware);
+}
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const middleware = composeEnhancers(applyMiddleware(...middlewares));
+
+const store = createStore(reducers, middleware);
+
+export default store;

react/tslint.json

@@ -8,6 +8,8 @@
   },
   "rules": {
     "member-access": false,
-    "ordered-imports": false
+    "ordered-imports": false,
+    "object-literal-sort-keys": false,
+    "no-console": false
   }
 }