1 of 39

Put a knob on that Redux Store

2 of 39

State is like a film reel

Set the right fps

3 of 39

State is like a film reel

Set the right fps

todos: [

{

text: β€œMake slides”

completed: false

},

{

text: β€œPractice”

Completed: false

}

todos: [

{

text: β€œMake slides”

completed: true

},

{

text: β€œPractice”

Completed: false

}

todos: [

{

text: β€œMake slides”

completed: true

},

{

text: β€œPractice”

Completed: true

}

slidesPrepared()

practiced()

Quite Literally

4 of 39

Redux in Motion

Middleware

Reducer

Store

View

Action 1

API

Action 2

Action 3

5 of 39

Middleware

Reducer

Store

View

Action 2

Action 3

render(1)

Redux in Motion

6 of 39

Redux in Motion

Middleware

Reducer

Store

View

Action 3

render(2)

7 of 39

Redux in Motion

Middleware

Reducer

Store

View

render(3)

8 of 39

dispatch(showSidePanel())

…

​

dispatch(updateProgress({ percent : 85 }));

…

​

dispatch(hideMenu());

...

Looks familiar?

9 of 39

dispatch(showSidePanel())

…

​

dispatch(updateProgress({ percent : 85 }));

…

​

dispatch(hideMenu());

...

Looks familiar?

10 of 39

for( … ) {

dispatch(selectRow( {id: index} ))

}

​

Looks innocent.

11 of 39

Middleware

Reducer

Store

View

Action

API

Action

Action

Action

Action

Action

Action

Action

Action

Action

Action

Action

Action

12 of 39

Middleware

Reducer

Store

View

Action

API

Action

Action

Action

Action

Action

Action

Action

Action

Action

Action

Action

Action

Seriously?

render()

render()

render()

render()

render()

render()

render()

render()

render()

13 of 39

  • Not all actions result in a meaningful frame
  • Unnecessary renders (sometimes costly)
  • Can end up in brittle layouts
  • Lower fps* !

Problem

14 of 39

I am impatient & I have a hack for this πŸ˜‰

Breakfast Buffet

15 of 39

redux-knob

πŸ‘·β€β™€οΈ The Redux middleware toolbelt

16 of 39

…

​

dispatch(batchedAction([

showSidePanel(),

updateStats({ progress: 85 }),

hideMenu(),

]))

17 of 39

Redux in Motion

redux-knob

Reducer

Store

View

Action 3

Action 2

Action 1

Batched Action

Action 5

Action 4

Batched Action

18 of 39

Redux in Motion

redux-knob

Reducer

Store

View

Action 5

Action 4

Batched Action

render(1 , 2, 3)

newState = action3(action2(action1(reducer)))

19 of 39

Redux in Motion

redux-knob

Reducer

Store

View

render(4, 5)

newState = action5(action4(reducer))

20 of 39

21 of 39

22 of 39

  • How do you handle Asynchronous functions?
  • What if I am not the author?
  • Is there a policy based batching?

But wait, there is more

23 of 39

Action Queues

24 of 39

Redux in Motion

redux-knob

Reducer

Store

View

Enable Queue

Action 1

Action 2

Action Queue

25 of 39

Redux in Motion

redux-knob

Reducer

Store

View

Action 1

Action 2

Action Queue

Flush Queue

26 of 39

Redux in Motion

redux-knob

Reducer

Store

View

Action 2

Flush Queue

Action Queue

Action 1

27 of 39

Redux in Motion

redux-knob

Reducer

Store

View

Flush Queue

Action Queue

Action 1

Action 2

28 of 39

Redux in Motion

redux-knob

Reducer

Store

View

Action Queue

Action 1

Action 2

29 of 39

Redux in Motion

redux-knob

Reducer

Store

View

Action 2

Action 1

Batched Action

Action Queue

30 of 39

Redux in Motion

redux-knob

Reducer

Store

View

render(1, 2)

Action Queue

newState = action2(action1(reducer))

31 of 39

Tip 1

Don’t make a long wait. Never.

32 of 39

Tip 2

You can have Queue Jumpers

​

33 of 39

Tip 3

Fine tune with care based on

  1. Frequency
  2. Criticality
  3. Side effects
  4. Dependency

34 of 39

Tip 4

Throttle actions (Not all)

35 of 39

Yes, we can have policy based ActionQueues !

36 of 39

So yeah, that's the end

37 of 39

38 of 39

​

​

​

​

@TheWizardJS πŸ§™β€β™‚οΈ

(Thiyagaraj T)

I work for an awesome company

Kubric.io

39 of 39

That’s all Folks