How to ReduxTed Pennings

New Relic Senior Software Engineer

What is Redux?• Broadly, a flux implementation

• Simple, conceptually and in file size (2kb)

• Inspired by functional programming and immutability (Elm, Clojure)

• Powers new APM Errors feature!

• Written by a super brilliant dude, Dan Abramov

• https://github.com/rackt/redux and http://redux.js.org/

Why Redux?

• Predictable state transitions

• Single source of truth for UI state

• Highly performant

• Easily testable

Why Redux?

👍Predictable state transitions

👍Single source of truth for UI state

👍Highly performant

👍Easily testable

The core concepts

Store

Actions and action creators

Reducers

Middleware

Store

• A wrapper around a Javascript object (state)

• Two key methods: getState(), dispatch()

• Using something like react-redux, you don’t really touch this directly!

▹ Store Actions Reducers Middleware

Store▹ Store

Actions Reducers Middleware

Disclaimer: not real code from APM product. Everything else is 💃

Actions• At its core, it’s a simple Javascript object

• type is the only required field (use constants)

• payload generally carries your data

• Action creators: functions that return the body of an action

• Happy place:“flux standard actions” spec

☑ Store ▹ Actions

Reducers Middleware

Actions☑ Store ▹ Actions

Reducers Middleware

Reducers• function reduce (state, action) { return state + 1}

• Generally a medium-size switch statement on action.type

• MUST return new copies of state that reflect changes

• Happy place: combineReducers(), immutability helpers

☑ Store ☑ Actions ▹ Reducers

Middleware

Reducers☑ Store ☑ Actions ▹ Reducers

Middleware

Reducers☑ Store ☑ Actions ▹ Reducers

Middleware

Middleware• Meta-actions

• Middleware can prevent actions from reaching the store’s reducers

• Middleware can dispatch actions (eg, dispatch a ‘better’ action in response to an action)

• Recommended: thunk, redux-promise, batched-updates

• We haven’t needed to write our own Redux middleware at New Relic (happy place = nothing to do)

☑ Store ☑ Actions ☑ Reducers ▹ Middleware

So… how do I use it?

Redux is built on many (great) opinions, so let’s ask that in reverse

So… how don’t I use it?💥NEVER MODIFY STATE IN THE STORE DIRECTLY

💥REDUCERS MUST BE FREE OF SIDE EFFECTS (NEVER MODIFY STATE DIRECTLY)

💥NEVER CHANGE DATA DIRECTLY. Redux does this for you as reducers return new copies of state that apply actions

💥 Trivial things like mouse/hover position or checkbox-type state doesn’t belong in Redux, I’d argue.

So… how do I use it?• In React: use

redux-react and connect()’ed React classes (but connect higher-level containers only)

• Redux has Angular bindings

So… how should I use it?• Use two classes of actions:

• Lower-level simple actions for simple state changes

• Higher-level actions (redux-thunk) to coordinate interactions

• Happy place: idempotent actions, self-throttling

Let’s build great things!😂Redux is powerful for building predictable,

testable, maintainable interfaces.

😂Redux makes you a better UI engineer by forcing you to handle state changes explicitly.

😂 I love talking about Redux, immutable state and functional programming in the UI tier. Let’s geek out about it! ( @thesleepyvegan)

😂 Thank you! 🍩