From 8ad913bb3f4d91dcf3c05177081a2a705d5e1b82 Mon Sep 17 00:00:00 2001 From: Dan Antal Date: Mon, 18 Mar 2019 23:53:30 +0200 Subject: [PATCH] Add redux thunk middleware --- package.json | 8 +- src/Display.tsx | 6 +- src/index.tsx | 2 +- src/store.ts | 80 +- tsconfig.json | 4 +- yarn-error.log | 6090 +++++++++++++++++++++++++++++++++++++++++++++++ yarn.lock | 24 + 7 files changed, 6185 insertions(+), 29 deletions(-) create mode 100644 yarn-error.log diff --git a/package.json b/package.json index 3c7fe7c..715da2c 100644 --- a/package.json +++ b/package.json @@ -12,12 +12,16 @@ "@types/react": "^16.8.7", "@types/react-dom": "^16.8.2", "@types/react-redux": "^7.0.3", + "@types/redux": "^3.6.0", + "@types/redux-devtools-extension": "^2.13.2", + "@types/redux-thunk": "^2.1.0", "babel-cli": "6.26.0", "babel-preset-env": "1.6.0", "clean-webpack-plugin": "^2.0.0", "css-loader": "0.28.5", "file-loader": "0.11.2", "html-webpack-plugin": "^3.2.0", + "redux-devtools-extension": "^2.13.8", "style-loader": "0.18.2", "ts-loader": "^5.3.3", "typescript": "^3.3.3333", @@ -26,10 +30,10 @@ "webpack-dev-server": "^3.2.1" }, "dependencies": { - "@types/redux": "^3.6.0", "react": "^16.8.4", "react-dom": "^16.8.4", "react-redux": "^6.0.1", - "redux": "^4.0.1" + "redux": "^4.0.1", + "redux-thunk": "^2.3.0" } } diff --git a/src/Display.tsx b/src/Display.tsx index 2c0b93c..dcd340a 100644 --- a/src/Display.tsx +++ b/src/Display.tsx @@ -3,11 +3,12 @@ import { connect } from 'react-redux' interface DisplayProps { value: number; + loading: boolean; } export class Display extends Component { render() { - return ( + return this.props.loading ?
Loading...
: (
{this.props.value}
@@ -16,7 +17,8 @@ export class Display extends Component { } const mapStateToProps = (state: any) => ({ - value: state.total + value: state.total, + loading: state.loading }); export default connect(mapStateToProps, null)(Display) diff --git a/src/index.tsx b/src/index.tsx index 6a67f69..8b7d33f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -14,7 +14,7 @@ class App extends React.Component<{}, {}> {
-