React/Redux Notes

REDUX STORE

1. Redux is a pattern and library used to manage and update an application’s state through events called “actions”.
2. It stores and tracks the global state, ensuring that it can only be manipulated in a predictable way. (controlled components?) Nope...actions via dispatch
3. The store is a container that holds the application’s global state

DISPATCH

1. Redux store method
2. The only way to update the state is by calling store.dispatch() and pass in an action object
3. This triggers the store to run its reducer function, makes the changes, and returns the new state

ACTIONS

1. The source of data for the store.
1. It carries a payload of information from the application to the store
2. It must have a type (descriptive name for the action) that describes what kind of action was performed
2. It is a plain JS object

REDUCER

1. An event listener which handles events based on the action/event type it receives
2. It is a function, receives current state and an action object, determines if and how to update the state, and returns a new state
1. (state, action) => newState

STATE vs. PROPS

1. State is a plain JS object that is managed within a component
1. Starts with a default value when the component mounts
2. Redux application state lives in the store
3. state => like a variable declared in a function
2. Props, short for properties, is a plain JS object that is passed to a component
1. Received from a parent, immutable to the children receiving it
2. props => like an argument passed to the function
3. They both hold information that influences the output of render

THUNK

1. Thunk is middleware that allows functions to be returned instead of plain JS action objects. This allows for delayed actions, like working with promises.
2. Middleware is important because it prevents things like an action creator returning an action before data has been fetched.

PROVIDER

1. A component that makes the react store available to any nested component.
1. Components that need access to the store, do so by calling connect()

CONNECT

1. Connects a React component to the Redux store
2. React component -> receives data from the store and learns which functions it can use to dispatch actions to the store
3. Returns a new,  connected component class. DOES NOT modify the original.

STATELESS FUNCTION

1. A function that can only render the data it receives. It DOES NOT manage or track changes to that data

CONTAINER vs. COMPONENT

1. A Container is connected to redux store, by convention, and is supposed to make things work
2. A component is supposed to be presentational. It only renders the data.

JSX

1. JSX = JavaScript XML => is a syntax extension of JavaScript. Enables us to write HTML in React

SPREAD OPERATOR

1. Provides a copy of all the elements inside something, like an array.

LIFECYCLE METHODS

1. Special methods of the component class that run some code when a component mounts and unmounts.
1. Mounts: when the component is rendered in the DOM for the first time
2. Unmounts: when the DOM produced by the component is removed

DOM

1. The data representation of the objects that comprise the structure and content of a document on the web.

CONDITIONAL vs. LIST RENDERING

1. Conditional rendering is when one creates a new component that encapsulates some behavior and then renders that component and its logic in another component.
2. List rendering takes some array and one can iterate through the values, or map a new array.
3. Keys help react identify which items have changed
1. Using indexes as keys can be problematic because data can change, if something gets deleted from the list, its index would be invalid and the element will have an unstable identity.

REACT.COMPONENT

1. This gives an ES6 class access to useful React features such as lifecycle hooks and local state.

2. Constructor

1. A special method used when objects created with the class keyword are initialized.

3. Super( )

1. A method used to call the constructor of the parent class; usually React.Component

CLOSURE

1. A function that remembers its lexical scope
1. Lexical scope is the functions local memory as well its parents local memory
2. Example:
1. function x() {
2.   var a = 7
3.   function y() {
4.     console.log(a)
5.   }
6.   return y
7. }
8. Even when y is returned, it remembers the scope of its parent, x; and that is where it finds the value for a.

THIS

1. A way of pointing to something in the program; provides context.
2. Its value depends on when and how it is called.
3. Example:
1. function myFunc() {
2.     console.log(this)    
3.   }
4. // this is default to the window because there is nothing to the left of the period
5. const obj = {
6.   bool: true,
7.   myFunc: myFunc,
8. }
9. 
   
10. obj.myFunc()
11. // this is now an object because to the left of the period is obj

Pro Tip: Read Documentation!