React State Management with Redux and MobX

2020-02-27 204浏览

  • 1.React State Management with Redux and MobX DARKO KUKOVEC @DarkoKukovec ANDREI ZVONIMIR CRNKOVIĆ @andreicek INFINUM @infinumco
  • 2.DARKO KUKOVEC ANDREI ZVONIMIR CRNKOVIĆ JS Team Lead @DarkoKukovec JS Emojineer @andreicek
  • 3.We're an independent design & development agency.
  • 4.SCHEDULE Topic React setState React + Redux React + MobX 13:45-14:30 14:30-15:15 15:15-16:00 The Joy of Optimizing Coffee.js? How I hacked my coffee machine using JavaScriptGraphQL:Data in modern times Una Kravets (DigitalOcean) Dominik Kundel (Twilio) Dotan Simha (The Guild) Time
  • 5.01 APP STATE
  • 6.APP STATE • Data • Which user is logged in? • Which todos did the user create? • UI • Which todos is the user looking at (filter - all, complete, incomplete)
  • 7.02 STATE MANAGEMENT
  • 8.STATE MANAGEMENT • What should happen when some data changes? • Does the UI need to be updated • Does some other data depend on it? • Does the app need to make an action (e.g. API call)?
  • 9.03 WHY DO WE NEED IT?
  • 10.IMAGE GOES INSIDE THIS BOX DELETE BOX AFTER PLACING IMAGE
  • 11.• Todos • Title • Status • Active filter • Number of todos
  • 12.Handing an action in the app
  • 13.Handing an action in the app • The user checks a todo as complete
  • 14.Handing an action in the app • The user checks a todo as complete • Mark the todo as complete
  • 15.Handing an action in the app • The user checks a todo as complete • Mark the todo as complete • Update the incomplete items count
  • 16.Handing an action in the app • The user checks a todo as complete • Mark the todo as complete • Update the incomplete items count • What filter is active again?
  • 17.Handing an action in the app • The user checks a todo as complete • Mark the todo as complete • Update the incomplete items count • What filter is active again? • Do I need to update the list of todos? • Add/remove item? • Sort items? • Should I show an empty state? • Should I make an API call? • Should I save the change into localStorage?
  • 18.Data Flow in JavaScript Applications - Ryan Christiani
  • 19.04 EXAMPLE PROJECT
  • 20.EXAMPLE PROJECT • Tech conference app • Fetch talk list (async action) • Favourite talks (simple sync action) • Filter by location (filtering data from the state) • To simplify • No routing • No forms • Not responsive • Only basic styling •Assumption:Browsers support Fetch API • 70% of browsers do, polyfill available for the rest
  • 21.EXAMPLE PROJECT - TECH STUFF • create-react-app as the initial setup •https://github.com/infinum/shift-2017
  • 22.05 BEFORE WE START...
  • 23.COMPONENT TYPES Container Presenter Usually root components Inside of container components No UI Only UI State of children components Dumb component Handle state changes "Data down, actions up"
  • 24.06 PREREQUISITES
  • 25.PREREQUISITES • • • • A modern IDE (VS Code, Sublime Text, Atom, Webstorm or similar) Latest version of Chrome/Chromium for debugging Node.js 6 or 7 npm 4 or yarn
  • 26.07 REACT + SETSTATE
  • 27.REACT + SETSTATE • • • • No central state Every component contains its (and children?) state State changes are async! - 2nd argument is a callback Component is re-rendered unless shouldComponentUpdate() returns false • Additional libs • react-addons-update
  • 28.// Code time! // setState // Code used forsetup:create-react-app app-setstate npm install --save react-addons-update v1.0
  • 29.* * * * Mock data Styles Presenter components Utils v1.0
  • 30.// Loading data v1.0
  • 31.// Container component state v1.1
  • 32.// Selectors v1.2
  • 33.FUNCTIONAL SETSTATE • Since React 15? • Will eventually replace the usage with objects as the first argument
  • 34.class App extends Component { constructor(props) { super(props); this.state = {counter:'>counter: