I am confused where the action is being dispatched

JavaScript
1 
 const defaultState = {
  authenticated: false
};

const authReducer = (state = defaultState, action) => {
  // change code below this line
switch(action.type) {
  case "LOGIN": 
    return {
      authenticated: true
    }
  case "LOGOUT":
    return {
      authenticated: false
    }
  default:
    return defaultState
}
  // change code above this line
};

const store = Redux.createStore(authReducer);

const loginUser = () => {
  return {
    type: 'LOGIN'
  }
};

const logoutUser = () => {
  return {
    type: 'LOGOUT'
  }
};

Where here are the logoutUser and loginUser being dispatched? I dont see them being passed into the Reducer anywhere.

Also why do we need

default:
    return defaultState
}

Thanks,

Andrej

2 
const loginUser = () => {
  return {
    type: 'LOGIN'
  }
};

So

loginUser()

Is

{ type: "LOGIN" }

Reducer takes the current state + that action, action.type is “LOGIN”, state is now {authenticated: true}

This is how switch statements work in JS, if you provide a default that’s what gets executed if the other cases don’t match. So if you pass something like { type: "FART" }, it won’t break anything, the current state will be returned (ie nothing will change). If you don’t provide a default, then the reducer will return undefined instead of a state object and everything will normally break

4

Ok thanks, I understand the default part but I am still confused where :

const authReducer = (state = defaultState, action)

Where is the action being called here. It has a parameter for action but I dont see where the action is actually being passed in. They keep talking about a action dispatch is made but I dont see where in this code/the code above, the action dispatch is made…

5

That’s just a plain function that takes the state + an action and returns the state, it has to be called by something else. Which is the dispatch function, which is attached to the object you create when you run createStore

function createStore(reducer) {
  let currentState = undefined;
  
  let getState = () => {
    return currentState;
  };

  let dispatch = (action) => {
    currentState = reducer(currentState, action);
    return action;
  };
  
  dispatch({ type: "INITIALISING_STORE" });

  return {
    getState,
    dispatch,
  };
}

There’s Redux :point_up: [minus the addListener method which adds nine lines of code to my implementation above), and the middleware stuff which is just another few lines].

dispatch is a function that takes an action & runs reduce

6

If you have a question about a challenge please link to the challenge. I assume it is this challenge or the next.

The test is calling store.dispatch if that is what you are asking about.