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<{}, {}> {
-