Redux Notes

*redux notes

Redux
  Redux Introduction
  ・state management
  ・get rid of all states in components
  ・put them in a store and pass the state to the component that needs it

Why Redux
    ・Good for managing large state
    ・Useful for sharing data between components
    ・Predictable state management using 3 principles
      - Single source of truth -> one state object that describes the app
      - State is read-only -> immutability, state object created with Redux will not be modified but you create a new state after each action is taken by the user
      - Changes using pure function
    ・Action -> action from the user (button pushed)
    ・Root Reducer -> pure function that receives the action an creates an output (state or store)
    ・Store -> entire state of the app
    ・Dom Changes -> state change re-render
    ・Flux pattern -> one way data flow (action -> dispatcher -> store -> view)
    ・MVC -> (action -> controller -> model -> view)

Problem without Redux
    ・when a child of a child needs the state (app -> header ->  cart (only cart component needs the state from app))

Redux Actions and Reducers
    ・Combination of reducers make up the Root Reducer -> pass state as props -> component -> trigger action -> update reducer
    ・Action object of type and payload
    ・Reducers are functions that take the current state and action
      - with the action type, determines it needs to rerender

Middleware in Redux
    ・something that receives the action object before the Root Reducer
    ・Redux Logger middleware -> logs the actions that get fired and what the states are before and after the action