provjs: six months of reactjs and redux
TRANSCRIPT
SIX MONTHS OF REACT & REDUX:A REAL WORLD USE CASEThom Nichols - @thom_nic
DISCLAIMER:
Not an expert I might be doing it wrong
SO YOU WANT TO TRY REACT + REDUX…
WHAT ARE YOU (PROBABLY) GOING TO NEED?
Webpack Babel + presets
React-redux Redux-thunk Redux-logger Axios or fetch-polyfill Immutable.js
React Redux
Jest or Mocha + JSDOM or Karma + Phantomjs React-router React-router-redux
ALL YOU NEED IS A FEW PACKAGES FROM NPM
GREAT! AM I READY TO START PROGRAMMING NOW?
WHAT ARE YOU (PROBABLY) GOING TO NEED?
Webpack Babel + presets
React-redux Redux-thunk Redux-logger Axios or fetch-polyfill Immutable.js
React Redux
Jest or Mocha + JSDOM or Karma + Phantomjs React-router React-router-redux
What we actually care about
WHAT ARE YOU (PROBABLY) GOING TO NEED?
Webpack Babel + presets
React-redux Redux-thunk Redux-logger Axios or fetch-polyfill Immutable.js
React Redux
Jest or Mocha + JSDOM or Karma + Phantomjs React-router React-router-redux
What we actually care about
LET’S TALK ABOUT REDUX
FLUX ARCHITECTURE
FLUX ARCHITECTURE - SIMPLIFIED
SHOW ME THE CODE!
TRIVIAL ACTION EXAMPLEstore.dispatch( addTodo(‘call mom’) );
TRIVIAL REDUCER EXAMPLE
THINGS NOBODY TOLD ME ABOUT REACT + REDUX
USE IMMUTABLE.JS RECORDS! Without Records:
With Records:
USE IMMUTABLE.JS RECORDS!
WHAT SHOULD MY STORES HOLD?
WHAT DOES MY DATA LOOK LIKE?
MY STORES HOLD MAPS
STORES MAY LISTEN TO “OTHER” ACTIONS
I’M IN UR COMPONENT…
CONNECTIN UR PROPS
ACTIONS + PROMISE CHAINING = AWESOME
ACTIONS + PROMISE CHAINING = AWESOME
WHAT’S ANNOYING? Component testing connected components is hard.
I rely (mostly) on functional testing
Export both a connect()-ed and non-connected component See: Erik Ras’ “ducks”
WHAT’S ANNOYING? It’s difficult to call a method on a component wrapped as a
high-order component…
DON’T DO IT BUT: you probably shouldn’t be doing that anyway:
pass data via callbacks passed from parent component. Or pass data via a redux action
LET’S RECAP Use ImmutableJS records for domain types in stores Use ImmutableJS Maps often for store data containers Use redux-thunk to make remote requests in actions Async action creators should always return a promise Reducer cases are not always 1-to-1 with actions Let me know if you’ve figured out the component testing issue
with connected components… HoC component wrapping cause some pain Webpack is really the most annoying part
MORE TRICKS
DEBOUNCE EXPENSIVE ACTIONS
Some independent top-level components say what data they want to fetch from `componentWillMount()`
Debounce a single remote request
CONSISTENTLY DISPATCH START & END ACTIONS
These are used for loading indicator & error messaging
BONUS: REDUX-FORM IS AWESOME
BONUS: REDUX-FORM IS AWESOME
DECIDE WHAT WORKS FOR YOU
Frameworks are less about prescribing “the right way” and more about getting everyone to do things the same way.
- @thom_nic
THANKS
ACTUALLY….
ASK ME ABOUT DIGITAL ELECTRICITY
MORE SLIDES
I DON’T NEED ANGULAR-RESOURCE
This is actually (really) boilerplate. Replaced with this:
WHY I DON’T NEED ANGULAR-RESOURCE … and http thunks of thunks:
A WORD TO THE WISE…
Avoid temptation to do client-side data manipulation to attempt to mirror server state.
Better to always fetch from the server as the source of truth