Answers To Study Guide: ReactJS + Redux Part II

This is part 2 of a follow-up, answer guide to my blog post Study Guide: ReactJS + Redux.

☁️This study guide extends vocabulary and key concepts from React, Redux, and JavaScript. Enjoy!💿

Check out part 1 answershere

I've broken it down into a few subtopics:

• LIFECYCLE HOOKS + LIFECYCLE METHODS
• REDUX
• JWT AUTHENTICATION

LIFECYCLE HOOKS + LIFECYCLE METHODS

1. What is a Lifecycle Hook? Name + describe some examples.

   • A method used in a functional component to set + update state.
   • useState is a Hook that lets you add React state to function components.
   • useEffect tells React that your component needs to do something after render. React will remember the function you passed, and call it later after performing the DOM updates.

2. What is a Lifecycle Method? Name + describe some examples.

   • A method used in a class component to set + update state.
   • componentDidMount() method allows us to execute the React code when the component is already placed in the DOM. This method is called during the Mounting phase of the React Life-cycle i.e after the component is rendered.

3. What is mounting? What is unmounting?

   • Mounting: the inserting of a component onto the DOM.
   • Unmounting: the removing of a component from the DOM>

4. Is there a difference between Lifecycle Hooks and Lifecycle Methods?

   • Besides syntax, there is ultimately no difference.
   • Both achieve setting + updating state in a React component, as well as the mounting or unmounting of a component to + from the DOM.
   • Hooks have the reputation of drying up code!

REDUX

1. What is Redux? Name some core features.

   • Redux is a state management library. It takes all of an application's state and stores it in a single location (the store) outside of the application.
   • Core features include: the store, reducers, actions, action creators...

2. What is the Redux "store"?

   • The location where all of an application's state is stored.

3. What is an action? How do actions work? What do they return?

   • A plain JavaScript object that describes the change that is to occur to state.
   • Since actions are JS objects, they have key-value properties. Actions must have a key of "type" that describes the action. They must also have a key of "payload" (which can be named anything) that holds the data of the change.
   • Redux actions do not return anything. They just trigger changes to the global state.

4. What is a reducer? How do reducers work? What do they return?

   • A function that takes in an action object to invoke the change described by the action object.
   • Reducers return a new state. They DO NOT return the old state modified.
   • Reducers are pure functions -- they must output the same result given the same input.

5. How does React and Redux communicate?

   • They communicate through the node package 'react-redux'.

6. What is an action creator?

   • A function that returns an action object.
   • Calling an action creator returns nothing but an object, so you have to either bind it to the store beforehand, or dispatch the result of calling your action creator.
   • Action Creator functions give us place to make FETCH API requests.

7. What is dispatching?

   • A function given to us from the Redux store.
   • It takes in an action and passes it to the reducer to invoke the reducer.
   • Dispatching returns the new state.
   • When we invoke dispatch and pass in an action object, the dispatch function calls our reducer and passes in the current state and the action object.

8. How does the store get updated?

   • The store gets updated through dispatching an action to a reducer to perform that action.
   • Once dispatched, the action goes inside the reducer function and returns the new state to the store.

9. What is mapPropsToState()?

   • A function given to us from Redux.
   • It takes in the current state and returns a JavaScript object with key-value pairs.
   • Each key represents its own separate prop/
   • Each key can then be used for state calls instead of calling props.

10. What is mapDispatchToState()?

    • A function given to us from Redux.
    • It takes in dispatch as an argument.
    • It returns a JS object with key-value pairs.
    • Each key has a value of a dispatched action to be used as a prop.

11. What is connect()?

    • A function given to us from the Redux store.
    • It connects a React component to the store.
    • mapState and mapDispatch can optionally be passed in.

12. Using Redux, when do components get rerendered?

    • Every time the state is updated.

13. What is THUNK?

    • A middleware that allows us to use functions inside an actio ("action creators").
    • It is given to us from redux-thunk node package.
    • It looks at every action that passes through the system, and if it’s a function, it calls that function.

14. What is "Provider"? What does "Provider" do?

    • Provider is a component given to use from the react-redux node package.
    • It takes in the store as an attribute as to avoid passing the store as props.
    • component makes the Redux store available to any nested components that need to access the Redux store.

JWT AUTHENTICATION

1. What is JWT?

   • JSON WEB TOKEN
   • Authorization: Once the user is logged in, each subsequent request will include the JWT, allowing the user to access routes, services, and resources that are permitted with that token.

2. What is the JWT structure?

   • JWT is broken down into 3 main parts: header, payload, and signature.

3. What is the JWT header?

   • The header typically consists of two parts: the type of the token, which is JWT, and the signing algorithm being used, such as HMAC SHA256 or RSA.

4. What is the JWT payload?

   • (set of claims): contains verifiable security statements, such as the identity of the user and the permissions they are allowed.

5. What is the JWT signature?

   • used to validate that the token is trustworthy.

6. How does JWT work?

   • In authentication, when the user successfully logs in using their credentials, a JSON Web Token will be returned.

7. What is a token?

   • a JSON encoded representation of a claim(s) that can be transferred between two parties(server and client).

💿Thank you for reading along!💿
☁️Comment below for any suggestions!☁️