1 8 Months of Redux March 4, 2017 Yuri Takhteyev CTO + 19 - - PowerPoint PPT Presentation

Months

March 4, 2017

Yuri Takhteyev
 CTO

1

• f Redux

+ 19 Ranglers

8

Define Prepare Execute

Redux at Rangle

• We’ve been actively using Redux for a bit over 18

months.

• This is a good opportunity to reflect on what we’ve

learned.

Define Prepare Execute Brendan Moore Ken Ono Steve Chae Alex Sapronov Daniel Figueiredo Katie Egervari Mo Binni Nikolas LeBlanc Thomas Marek Varun Vachhar John Chen Rob Brander Michael Bennett Andrew Lo Evan Schultz Seth Davenport Adam Winick Mark Degani Michael Faust

Contributors

Overview

Define Prepare

What We’ve Learned: Redux is Great!

• Our developers love it.
• We’ve been using it on pretty much all of our

projects.

• The strongest alternative: your own Redux!

Overview

Define Prepare Execute

What’s So Great?

• Makes it easy to think about events.
• Very simple.*
• Great tools, only got better with time.
• Code is easy to test.

Overview

Define Prepare Execute

More Great Stuff

• Organizes your code.
• Makes it easy to dive into a new code base and find

your way around it.*

• Encourages best practices such as pure functions.

Overview

Define Prepare Execute

Caveats

• Learning curve may be steep. More on this below.
• Performance can get tricky on large apps.
• The store can get out of hand.
• Reducers can get nasty if you don’t keep them small.
• You need to find an appropriate solution for

handling side effects.

Overview

Groking Redux

Define Prepare Execute

Understanding the Key Concepts

• Redux is simple, but not always easy to learn.
• Understand reduction. Love Array.reduce.
• Implement your own Redux.
• Do you understand this style of code?

Groking Redux

const.logger.=.store.=>.next.=>.action.=>.{
 ..…
 };

Define Prepare Execute

More Tips

• Read the docs, then read them again.
• Take time to understand the “weird” bits.
• Start with redux-thunk, but abandon it later.
• Follow Dan, but remember Dan is human.

Groking Redux

Performance

Define Prepare Execute

Component Updates

• Busy event streams can lead to constant component

updates.

• Container / dumb component pattern can

exacerbate this.

• Be smart about what you connect and where. You

can connect lower in the component tree.

• Use shouldComponentUpdate.

Performance

The Store

Define Prepare Execute

Should It Go in the Store?

• Should something go in the store or component

state? Usually the store.

• But be pragmatic.

The Store

Define Prepare Execute

How to Layout the Store?

• What should determine the shape of your store?
• It shouldn’t be the API. (Plan to transform.)
• It shouldn’t be the views. (Plan to transform.)
• Optimize for simple reducers.
• Think of the store as your database.

The Store

Define Prepare Execute

Rules of Thumb for Your Store

• Don’t store anything that can be calculated.
• Keep it very flat.
• Avoid arrays. Prefer objects, keyed by id when

appropriate.

The Store

Define Prepare Execute

Enforcing Immutability

• ImmutableJS is a common option, but it comes with

a cost.

• There are alternative approaches: Object.assign,

immutable-helper, seamless-immutable.

The Store

Define Prepare Execute

Use Selectors

• Your store shouldn’t cater to your components.
• Never store computed values.
• Remap data with selector functions.
• User reselect to to create composable memoized

selectors, to avoid recalculation.

The Store

Reducers

Define Prepare Execute

Combine Simple Reducers

• Keep reducers small.
• Combine small reducers into more complex ones.
• Use higher order reducers.

Reducers

Define Prepare Execute

Higher Order Reducers

• A function that returns a reducer.
• combineReducers is an example.
• chainReducers (from redux-transducers),

ignoreActions (form redux-ignore).

• Write your own!

Reducers

Define Prepare Execute

Example: A Reducer

let.colors.=.(state,.action).=>.{
 ..switch.(action.type).{
 ....case.COLOR_ADDED:
 ......return.[...state,.action.payload];
 ....case.COLOR_REMOVED':
 ......return.state.filter(n.=>
 ..............n.id.!==.action.payload.id);
 ....default.state;
 ..}
 }

Reducers

Define Prepare Execute

Example: A Higher Order Reducer

let.listReducer.=.(addAction,.removeAction).=>.
 ..(state,.action).=>.{
 ....switch.(action.type).{
 ......case.addAction:
 ........return.[...state,.action.payload];
 ......case.removeAction':
 ........return.state.filter(
 ................n.=>.n.id.!==.action.payload.id);
 ......default.state;
 ....}
 ..}
 }. let.app.=.combineReducers({
 ..colors:.listReducer(COLOR_ADDED,.COLOR_REMOVED),
 ...... }

Reducers

Actions and
 Side-Effects

Define Prepare Execute

Keep Your Actions Simple

• Keep your actions very simple.
• Ideally, your action creators should have no logic.
• This means you’ll need a side effects library.

Side Effects

Define Prepare Execute

Redux-Thunk

• A good place to start.
• Key limitation: you still have logic in your action

creators.

• Explore that limitation.
• You’ll understand how middleware works better

also.

• Do plan for the cost of switching.

Side Effects

Define Prepare Execute

Sagas and Observables

• redux-sagas and redux-observable are the main

two long term solutions.

• ES6 generators (function*) vs observables (rx-js).
• Pick one and stick with it.

Side Effects

Testing Redux

Define Prepare Execute

Focus on Testing What Matters

• Test reducers, one action per unit test.
• Test selectors.

Testing

Define Prepare Execute

Testing Action Creators

• Test your action creators if they have logic.
• But ask yourself, why do you have logic in your

action creators?

Testing

Define Prepare Execute

Testing Side Effects

• Can be tricky, but should be done.
• Depends on the library.

Testing

@qaramazov @rangleio

March 4, 2017

Yuri Takhteyev
 CTO

18 Months of Redux

+ collaborators