setup counter with redux

Author: elsonlim-tw

package-lock.json

@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-redux": "^7.2.0",
+    "react-scripts": "3.4.1",
+    "redux": "^4.0.5"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -1,25 +1,16 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import "./App.css";
+import Counter from "./Counter";
+import { Provider } from "react-redux";
+import store from "./store";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Provider store={store}>
+      <div className="App">
+        <Counter />
+      </div>
+    </Provider>
   );
 }
 

src/App.js

@@ -0,0 +1,14 @@
+import React from "react";
+import CounterDisplay from "./CounterDisplay";
+import CounterIncrementButton from "./CounterIncrementButton";
+
+function Counter() {
+  return (
+    <div>
+      <CounterDisplay />
+      <CounterIncrementButton />
+    </div>
+  );
+}
+
+export default Counter;

src/Counter.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { connect } from "react-redux";
+
+class CounterDisplay extends React.Component {
+  render() {
+    const { counterValue } = this.props;
+    return <div>CounterValue is: {counterValue}</div>;
+  }
+}
+
+const mapStateToProp = (state) => {
+  const value = state.value;
+
+  return {
+    counterValue: value,
+  };
+};
+
+export default connect(mapStateToProp)(CounterDisplay);

src/CounterDisplay.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { connect } from "react-redux";
+import { updateCounterValue as updateCounterValueFromAction } from "./actions/counter.action";
+
+function CounterButton({ counterValue, updateCounterValue }) {
+  return (
+    <div>
+      <button onClick={() => updateCounterValue(counterValue + 1)}>+1</button>
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => {
+  return {
+    counterValue: state.value,
+  };
+};
+
+const mapDispatchToProps = {
+  updateCounterValue: updateCounterValueFromAction,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(CounterButton);

src/CounterIncrementButton.js

@@ -0,0 +1,7 @@
+export const UPDATE_COUNTER = "UPDATE_COUNTER_VALUE";
+export const updateCounterValue = (payload) => {
+  return {
+    type: UPDATE_COUNTER,
+    payload: payload,
+  };
+};

src/actions/counter.action.js

@@ -0,0 +1,15 @@
+import { UPDATE_COUNTER } from "../actions/counter.action";
+const initialState = {
+  value: 0,
+};
+
+const counterReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case UPDATE_COUNTER:
+      return { ...state, value: action.payload };
+    default:
+      return state;
+  }
+};
+
+export default counterReducer;

src/store/counter.reducer.js

@@ -0,0 +1,6 @@
+import { createStore } from "redux";
+import counterReducer from "./counter.reducer";
+
+const store = createStore(counterReducer);
+
+export default store;