react-redux.md

React

A web component framework to generate HTML, that is compiled from a special JavaScript-like syntax.

Definitions

• Component:
  • a module that is re-usable which renders the HTML content
  • can be a function or a Class
  • props:
    • used to pass data from parent to child components
    • immutable and cannot be changed once passed to child
  • state
    • used by component specifically
    • when state changes then component is re-rendered
  • constructor(props): takes props and sets state
  • componentDidMount(): invoked immediately after a component is mounted (to DOM)
  • componentDidUpdate(): invoked when state changes
  • componentWillUnmount(): component is being removed from DOM
  • render() used to convert component to HTML
• Route:
  • a Component that is rendered conditionally "when the path matches the current URL"
• Router:
  • used for navigating
  • Example: <BrowserRouter />, <Switch />

Hooks

Lets you use state and other features without a Class.

• useEffect(): perform a side effect in a function-component
• useState(): equivalent to using a Component constructor to copy props into state
• createContext():
  • used to pass data through the component tree without having to pass props down manualy for each level
• useContext():
  • reference a context with a default value

Authentication

1. Craete a login Component
2. Authentication state to store/persist access token
3. Logic to determine render state based on authentication state
4. Login action to call API

Redux

Helps solve distributed state access many React components.

graph TB
    A[Action] --> D

    subgraph Store
        D[Dispatcher] --> R
        R[Reducer] --> S
        S[State] --> R
    end

    S --> V
    V[View] --> A

Loading

Definitions

• Provider:
  • used to make Store available to entire App component
  • a special component that supplies a context
• Reducer:
  • a function that accepts current State and an Action and returns the new State.
  • Example: (currentState, action) => newState
• Store:
  • an object that golds the state of the application
  • Store::subscribe(callback) - watch for state changes and update UI/UX
  • Store::dispatch(action) - only way to update state
  • Store::getState() - return a copy of state

Hooks

• useSelector(): get state
• useDispatch(): get the dispatch function
• configureStore(...): - register reducers
• createSlice(initialState): - name and initial state along with reducers to create actions