counter 2 increments whenever counter 1 increments ;)

Author: boostup

src/App.js

@@ -31,23 +31,34 @@ export default function App() {
 
  <HeaderComponent />
 
+ <br />
+
  <p>
  We, buttons below, live on the ground floor, level 0, in the App.js file
  directly but, we're cool!
  </p>
 
- <p className="App__groundFloor">
+ <p>
  <ButtonComponent
  instructions="Press me to increment counter 1"
  onClick={handleClick1}
  />
- <hr />
+ </p>
+
+ <hr />
+
+ <p>
+ <span role="img" aria-label="pulling my tongue">
+ 👀 👍
+ </span>
  <ButtonComponent
- instructions="No no, press me to increment counter 2, he's much better ;)"
+ instructions="Whenever I see that counter 1 increments, I increment counter 2! This way, I'm always ahead of competition. But you can still press me though"
  onClick={handleClick2}
  />
  </p>
 
+ <br />
+
  <FooterComponent />
  </div>
  );

src/reducers/counter1/counter1.reducers.js

@@ -1,7 +1,7 @@
 export const counter1initialState = 0;
 
 export function counter1Reducers(state, action) {
- console.log((state, action));
+ // console.log(state, action);
  switch (action.type) {
  case "INCREMENT_COUNTER_1":
  return state + 1;

src/reducers/counter2/counter2.reducers.js

@@ -1,7 +1,7 @@
 export const counter2initialState = 0;
 
 export function counter2Reducers(state, action) {
- console.log((state, action));
+ console.log(state, action);
  switch (action.type) {
  case "INCREMENT_COUNTER_2":
  return state + 1;

src/sagas/counter2/counter2.sagas.js

@@ -1,4 +1,4 @@
-import { select, call, delay, put, takeLatest } from "redux-saga/effects";
+import { select, call, delay, put, takeLatest, all } from "redux-saga/effects";
 
 function* incrementAsync() {
  const previousState = yield select();
@@ -13,7 +13,25 @@ function* incrementAsync() {
  yield call(console.log, "I AM FINISHED INCREMENTING TO", state.counter2);
 }
 
+function* listenToCounter1IncrementsAsync() {
+ yield delay(1000);
+ yield put({ type: "INCREMENT_COUNTER_2" });
+ yield put({ type: "INCREMENT_COUNTER_UPON_LISTENNING" });
+}
+
 //increment saga
 export function* incrementCounter2Start() {
  yield takeLatest("INCREMENT_COUNTER_2_START", incrementAsync);
 }
+
+export function* listenToCounter1Increments() {
+ yield takeLatest("INCREMENT_COUNTER_1", listenToCounter1IncrementsAsync);
+}
+
+export function* counter1Sagas() {
+ yield all([
+ //
+ call(incrementCounter2Start),
+ call(listenToCounter1Increments),
+ ]);
+}

src/sagas/rootSagas.js

@@ -1,8 +1,8 @@
 import { all, call } from "redux-saga/effects";
 
 import { incrementCounter1Start } from "./counter1/counter1.sagas";
-import { incrementCounter2Start } from "./counter2/counter2.sagas";
+import { counter1Sagas } from "./counter2/counter2.sagas";
 
 export default function* rootSaga() {
- yield all([call(incrementCounter1Start), call(incrementCounter2Start)]);
+ yield all([call(incrementCounter1Start), call(counter1Sagas)]);
 }

src/styles.css

@@ -26,14 +26,19 @@ App > div > div {
  padding: 1rem;
 }
 
+.App > div,
+.App > div > div {
+ padding-top: 3rem;
+}
+
 .App > div > div {
  width: 80%;
  border: 5px solid teal;
 }
 
 .App > div::before,
 .App > div > div::before {
- content: "Depth: Level 1";
+ content: "Depth: 1";
  position: absolute;
  top: 0;
  left: 0;
@@ -42,8 +47,5 @@ App > div > div {
 }
 
 .App > div > div::before {
- content: "Depth: Level 2";
-}
-
-.App__groundFloor {
+ content: "Depth: 2";
 }