Skip to content

Latest commit

 

History

History

lesson-5

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

public

public

 
 

src

src

 
 

README.md

README.md

 
 

package.json

package.json

 
 

README.md

React router / redux

Goal - understand basics of react router and redux

Workshop structure

  • [goal] add second page showing summary of all notes, that can be accessed from menu in header
  • [exercise - refactor] move logic from App.js to separate component - EditNotesPage.js
    1. create component EditNotesPage and move logic from App.js to this new component (this breaks everything for now)
    2. create folder editNotesPage and move all related components to it
    3. fix paths in moved components, so it builds
  • [theory] react router
  • [demo] add one link to header and point it to EditNotesPage
  • [exercise] create second page with summary
    1. create new folder summaryPage
    2. create new component summaryPage and make it display titles of all notes (won't work for now, we broke stuff in our refactor)
    3. make the new component display some dummy data for now
    4. npm i --save 'react-router-dom'
    5. add link to the header and make it work
  • [theory] redux
    1. overview
    2. three principles
    3. why to use redux
    4. disadvantages
  • [demo] add redux to to editNotesPage
  • [demo] combining reducers
  • [exercise]
    1. npm install --save react-redux
    2. add redux to header
  • [theory] redux vs local state

Changes since end of workshop

  • added redux-logger package (dont forget to run 'npm i'), so if you open your browser console, you will see every state change there, like so
  • removed combining reducers - everything is now in Reducer.js (it was unnecessary so far and confusing)
  • action types are now string constants inside Reducer.js - it's very recommended to use constants instead of typing it in every time
  • connected NewNoteModal.js to redux store and added NOTE_ADDED action - notice how action is dispatched there

Exercise @home - connect Header to redux store and make it display number of notes

  • it's better to pass to the component only number of notes - this components doesn't need to have access to whole array

Exercise @home - connect SummaryPage to redux store and make it display all note titles as a list

Exercise @home (for bonus points) - add MAKE ALL CAPS button

  • add MAKE ALL CAPS button next to edit and remove buttons, that will make make title of the note all UPPER CASE
  • it's useful if you want to easily make a note REALLY IMPORTANT
  • should be done through new action, with action.type = 'NOTE_MAKE_TITLE_ALL_CAPS'

Learning resources