freeCodeCamp Challenge Guide: Register a Store Listener

Register a Store Listener


Problem Explanation

Let’s break the instructions down to figure exactly what it’s asking.

Write a callback function that increments the global variable count every time the store receives an action, and pass this function in to the store.subscribe() method.

We can summarize these steps into small chunks:

  1. write a callback function
  2. increment the global variable count
  3. pass function to store.subscribe() method.

Awesome! Now let’s review some of the basics again.

What is a “callback function” in plain English?
A callback function is simply a function that gets called after another function is done being executed. In the real-world, it might be something like this:

// You drop your car off at the mechanic and you want the shop to 'call you back' when your car is fixed.
let carIsBroken = true;
const callCarOwner = () => console.log("Hello your car is done!");
const fixCar = (carIsBroken, callCarOwner) => {
  if (carIsBroken === true) {
    carIsBroken = false;
  }
  console.log(carIsBroken);
  // After the car is fixed, the last thing we do is call the car owner - that's our 'callback function'.
  callCarOwner();
};
fixCar(carIsBroken, callCarOwner);

How do you increase a number variable?
We can do this by using the “+=” operator.

let count = 1;
const addOne = () => (count += 1);

How do you pass a function to a method?

We can pass a function to a method the same way we might pass a variable to a method. Just pass it in as an argument!

function sayHi() {
  console.log("Hi!");
}
store.subscribe(sayHi);

Solutions

Solution 1 (Click to Show/Hide)

Using a function definition for the callback.

const ADD = 'ADD';

const reducer = (state = 0, action) => {
  switch(action.type) {
    case ADD:
      return state + 1;
    default:
      return state;
  }
};

const store = Redux.createStore(reducer);

// Global count variable:
let count = 0;

// Change code below this line

const add = () => count++;
store.subscribe(add);

// Change code above this line

store.dispatch({type: ADD});
console.log(count);
store.dispatch({type: ADD});
console.log(count);
store.dispatch({type: ADD});
console.log(count);
Solution 2 (Click to Show/Hide)

Using an anonymous inline callback function.

const ADD = 'ADD';

const reducer = (state = 0, action) => {
  switch(action.type) {
    case ADD:
      return state + 1;
    default:
      return state;
  }
};

const store = Redux.createStore(reducer);

// Global count variable:
let count = 0;

// Change code below this line

store.subscribe(() => count++);

// Change code above this line

store.dispatch({type: ADD});
console.log(count);
store.dispatch({type: ADD});
console.log(count);
store.dispatch({type: ADD});
console.log(count);
66 Likes