Redux: Define a Redux Action

• Updating state is one of Redux core tasks. In Redux, all state updates are triggered by dispatching actions. Think of Redux actions as messengers that deliver information about events happening in your app to the Redux store. The store then conducts the business of updating state based on the action that occurred.
• For example, the action carries a username after a user logs in, actions must carry a type property that specifies the 'type' of action that occurred.
• Here we have to write a Redux action as simple as declaring an object with a type property. Declare an object action and let's give it a property type set to the string 'LOGIN'.
• Answer:

const action = {
  type: 'LOGIN'
}

Define an Action Creator

• After we have created an action. The next step is to send the action to the redux store so it can update its state. An action creator is simply a JavaScript function that returns an action.
• Let's define a function named actionCreator() that returns the action object when called.
• Code:

const action = {
  type: 'LOGIN'
}

• Answer:

function actionCreator() {
  return action;
}

Dispatch an Action Event

• Dispatch method is what you use to dispatch actions to the Redux store. Calling store.dispatch() and passing the value returned from an action creator sends an action back to the store.
• Like the above post, action creators return an object with a type property that specifies the action that has occurred. Then the method dispatches an action object to the Redux store.
• We can dispatch both the action of type 'LOGIN':

store.dispatch(actionCreator());
store.dispatch({ type: 'LOGIN' });

• Here FreeCodeCamp wants us dispatch the 'LOGIN' action to the Redux store by calling the dispatch method, and passing the action created by loginAction()
• Code:

const store = Redux.createStore(
  (state = {login: false}) => state
);

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

• Here there's an initialized state that's an object containing a login property currently set to false. There's also an action creator called loginAction() which returns an action of type LOGIN
• Answer:

store.dispatch(loginAction())

Handle an Action in the Store

• The job of a reducer function is put simply, helps the Redux store know how to respond to that action. Reducers in Redux are responsible for the state modifications that take place in response to actions. A reducer takes state and actionas arguments, and it always returns a new state.
• The reducer function must always return a new copy of state and never modify state directly.
• Code:

const defaultState = {
  login: false
};

const reducer = (state = defaultState, action) => {
  // Change code below this line

  // Change code above this line
};

const store = Redux.createStore(reducer);

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

• Here we have to fill in the body of the reducer function so that if it receives an action of type: 'LOGIN' it returns a state object with login set to true. Else it returns the current state. Since the current state and dispatched action are passed to the reducer you can access the action's type with action.type

• Answer:
  

const reducer = (state = defaultState, action) => {
  if (action.type === "LOGIN") {
    return { login: true };
  } else {
    return state;
  }

};

Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/redux