Code 401: Class 36 - Application State with Redux

---

Questions

1. What are the advantages of storing tokens in “Cookies” vs “Local Storage”? It is better to store tokens in cookies because cookies are less susceptible to XSS attacks.

2. Explain 3rd party cookies. 3rd party cookies are placed on a client by a creator other than the site that installs them, primarily used for tracking, advertisement targeting, and analysis

3. How do pixel tags work? Pixel tags work like any other tag and are served just like other images, but they are intended to be invisible to the user. The image is served by an advertiser who then gains access to reading and recording the user cookies

Vocabulary

• Cookies piece of information stored on client computer
• Authorization Process by which a client proves their identity and is granted access or privileges
• Access control Limiting which clients can access which parts of a site
• Conditional rendering Rendering certain parts of a page or site depending on a client or current state

Watch: Dan Abramov Redux Tutorials

• Everything that changes in an app is stored in a single object
• Action allows for changes to Redux
• State is redundant
• Redux functions must be pure

• Function must take in previous state and return the new state

• Video 5 stops working at the 47th second
• Videos 6 - 29 do not work
• Video 30 works for about half

Read: React Redux

• React Redux is the official React binding for Redux
• npm i react-redux

  import React from 'react'
  import ReactDOM from 'react-dom'

  import { Provider } from 'react-redux'
  import store from './store'

  import App from './App'

  const rootElement = document.getElementById('root')
  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    rootElement
  )

• connect() function used to connect your component to the store
• Wrap the app at the index level in the <Provider store={store}> <App> </Provider>
• If you do not subscribe a component to the store it will not rerender when the store changes
• If you subscribe a by calling connect with both mapStateToProps and mapDispatchToProps
  • rerender when the values that mapStatetoProps extracts from the store
  • receive all of the action creators that are injected with mapDispatchToProps and dispatch actions when called
• Redux can be used with any UI layer including: React, Angular, Vue, Ember, Vanilla JS
• Integrating Redux with a UI
  1. Create a Redux store
  2. Subscribe to updates
  3. Inside the subscription callback:
     • Get teh current store state
     • Extract the data needed by this piece of UI
     • Update the UI with the data
  4. If necessary, render the UI with initial state
  5. Respond to UI inputs by dispatching Redux actions
• Components should be unaware of Redux, should receive data and fucntions as props just like other react components

Bookmark: Worlds easiest guide to redux

Bookmark: Testing Reducers

Bookmark: Redux Docs

---

Return to reading-notes Deployed Site

Return to reading-notes Mark Down