provjs: six months of reactjs and redux

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