Register a Store Listener

JavaScript
1

Tell us what’s happening:
My code doens’t work and i can’t understand why.Could someone please help me?

Your code so far


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(reducer = () => {
    switch (action.type) {
        case ADD:
            count += 1; // Optimize rendering of view. Only one DOM api call.
        break;
        default:
            store.getState(); // Some DOM api calls.
    }
});
// 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);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/redux/register-a-store-listener

2

I’m not familiar with Redux, but I see one obvious error.

First

const reducer = (state = 0, action) => {...
...
store.subscribe(reducer = () => {...

You are trying to redefine the constant, which is an error. So, the code can’t even run.
Even without const, you don’t want to override the ‘reducer’ function.

store.subscribe() simply invokes a callback after an action dispatch. This means it has no business with action, so passing a function that deals with an action seems weird. (At least, according to the doc)

Since, the exercise only asks for mutating global variable, I’ve done something like this and it passed the test.

store.subscribe( () => { ++count } )
2 Likes
3
  • You should not need to use reducer as a callback in store.subscribe
  • Use expression when you pass function as an argument to other function: store.subscribe( ()=> count +=1) and not statement store.subscribe( counter= ()=> count +=1).
  • Your reducer in store.subscribe uses variables that are not passed as arguments like action

subscribe(listener)​
Adds a change listener. It will be called any time an action is dispatched, …
Store | Redux

The solution is to use a callback only to increment the counter:

const incrementCounter = () => count +=1 
store.subscribe(incrementCounter);

or in 1 line
store.subscribe( () => count +=1 )

4 Likes
4

store.subcribe( () => {count++} );

in the given code area, when run, throws up

// running test
store.subcribe is not a function
store.subcribe is not a function
store.subcribe is not a function
// tests completed

now what?

25%20AM
25%20AM419×812 38.2 KB

5

Please check your spelling.

1 Like
6

@gunhoo93 Thanks - I feel silly now

7

Silliest 10 minutes in my life suscribe vs subscribe

8 
// change code below this line
function increment () {
  return count++;
}
store.subscribe(increment);
// change code above this line
9

const ADD = ‘ADD’;
const reducer = (state = 0, action) => {
switch(action.type) {
case ADD:
return state + 1;
default:
return state;
}
};
const store = Redux.createStore(reducer);
let count = 0;
store.subscribe( () => { ++count } )
store.dispatch({type: ADD});
console.log(count);
store.dispatch({type: ADD});
console.log(count);
store.dispatch({type: ADD});
console.log(count);

Try this, it worked for me.

1 Like