Adding Redux to a React app, the why and the how (and the testing!)

1. React with Redux (& Immutable)
Adding Redux to a React App
@tinaheiligers1, tina.heiligers@gmail.com, https://github.com/TinaHeiligers

2. The next 40-45 min….
...is best if you have some background in React and Redux
…is even better if you’ve worked with Immutable
...understand that I’ll probably make mistakes and stumble over my words
...don’t mind a South African accent
The what, the why, the how….final result!

3. The app...
● Game (match cards)
● Aimed at kids (expect to see cartoons)
● Versions:
○ React v15
○ React v16 + Redux (+ redux saga) + Immutable
● Subtle differences: styling, routing, layout

4. Vanilla React App
● React 15
● CSS
● Animations
● CRA
Click me!

5. Features
Players (names,
matched cards)
Cards (visible,
selected,
matched)
Game (not started, in progress, over)
Player turn
Game over

6. React app Architecture
Parent (App container):
● State -> props to children
● Methods -> props to children
● Renders children
Props, methods from App ->
components
Sta
Sta
na
n

7. Prop inheritance detail -> StartPage
da
med

8. Prop inheritance detail -> StartPage
da
da
da
Dat at
Dat ate r xi ~> ro g

9. Prop inheritance detail -> StartPage (players - add)
Dat at
da

10. Prop inheritance detail -> StartPage (game)
Ap -> c i d
da
da

11. Start page: Overview Sta /da & me d r A p
New t /da s e b t A
Gra t om
us , se t
ba t A , no
we p a r
e r xi ~> ro g

12. Deep nesting: Prop drilling!
Passing methods down to children components
Passing method results back up to parent component
What’s wrong with React on its
own?
React
Parent
State Methods
Child
Props Props()
Nothing (if components are shallowly nested)

13. Redux to the rescue!

14. What is Redux?
State management: -> pub/sub
https://redux.js.org/

15. Why use Redux?
React with Redux
Store
Container
Component
Shared (redux) state between components
Modular approach: React (UI), Redux (State)
Simplify logic
Easy to move logic around
-> no/minimal decoupling

16. Redux
Con t l et t am u t a g in ;
Don’t a r ut ;
Don’t e n ex n ta ,
https://redux.js.org/
?

17. Child Container
StateProps
View Component
Props
Child Container
StateProps
View Component
Props
React
Main Container
React with Redux
State
Child Container
StateProps
View Component
Props
Store
re-re
Container
Props
View Component
Props
Container
Props
View Component
Props
Container
Props
View Component
Props
Actions
Reducers

18. Still confused???

19. A cartoon intro to Redux (by Lin Clark @linclark)
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

20. A cartoon intro to Redux, connecting to React
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

21. A cartoon intro to Redux, connecting to React
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

22. A cartoon intro to Redux, connecting to React
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

23. A cartoon intro to Redux, connecting to React
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

24. A cartoon intro to Redux, connecting to React
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

25. A cartoon intro to Redux, connecting to React
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

26. A cartoon intro to Redux, connecting to React
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

27. A cartoon intro to Redux, connecting to React
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
Pur

28. A cartoon intro to Redux, connecting to React
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

29. A cartoon intro to Redux, connecting to React
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

30. A cartoon intro to Redux, connecting to React
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

31. A cartoon intro to Redux
https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

32. React with Redux
React-redux library API:
● <Provider store>
● connect([mapStateToProps], [mapDispatchToProps],
[mergeProps], [options])
https://github.com/reduxjs/react-redux

33. My Approach
Decide: Rewrite vs Refactor
Rewrite
Decouple complex interdependent logic
Limited test coverage
Small apps easier, take less time
Refactor
Redefine logic
Reasonable test coverage
Larger apps (already in prod?)
Iterative approach

34. My Approach
Think twice, act once!
1. Understand the code!
2. Decouple the logic
3. ‘Design’ your state (not always a
1 to 1 mapping)
4. Which components need data
from state
5. Tackle one feature at a time

35. My Approach
Step 1: Understand
Understand the code!
...we’ve t e t ....(ki )

36. My Approach
Step 2: Decouple Logic
● UI methods -> React/Utilities
methods
○ Date-time methods
○ Time outs
○ Animations
○ etc.
● Data methods -> Redux state
○ API interactions (typically)
○ Data manipulations
○ Error methods
○ Side effects

37. My Approach
Step 3: Design state
● UI state -> React state
○ Toggles, sliders, colors,
hidden/visible etc.
● Data state (+ manipulators) ->
Redux state
○ API interactions (typically)
○ Form data

38. My Approach
Step 4: Redefine components
What data does a component need?
-> map state to props
How does a component interact with
data? -> map dispatch to props
Which components are purely views?

39. To Immutable or not?
The case for immutable
Pros:
Protects from mutations
Protects you from yourself!
Cons:
Learning curve
Verbose
The case against immutable
Pros:
Nothing new to learn
Concise
Cons:
No protection from mutations
Discipline

40. ● React 16
● Styled
components
● Redux-little-router
● Webpack
React + Redux: other decisions
Click me!

41. Features: still the same
Players (names,
matched cards)
Cards (visible,
selected, matched)
Player turn
Game over
Game (not started, in progress, over)
Layout is slightly different

42. Steps
Redux bit
Add store
Add actions (& action creators)
Add reducers

43. Store

44. Actions & Action Creators (e.g. players)
Acis
Acicar

45. Reducer (e.g. players)

46. React-Redux bit
Connect app to state
Map state to props
Map dispatch to props
Call action creators/dispatchers
Steps

47. Main App
Containers -> connected
Components -> views

48. StartPage
Dis c -> p o s
Sta -> p o s

49. StartPage

50. StartPage

51. StartPage

52. Start game
Ac i

53. Start game
Ac i p ed
b ed

54. Composing actions in logical
manner
Redux Saga
(alt: Redux thunks etc)
https://github.com/redux-saga/redux-saga
How do we know
what happens
next?

55. Start game
Sag c e c o s
Seq e f i n

56. Repeat following the same methodology...

57. Testing
Jest

58. Testing -> Game Actions
ac s
te s

59. Testing -> Game Reducer
re r
te s

60. Testing -> Game Reducer cont.
re r
te s

61. Testing -> Game Saga
sa
te

62. Testing -> Game Saga
sa
te

63. Testing -> Game Saga
sa
te

64. Redux dev tools

65. More info
You might not need Redux
https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

66. Code
Findme1.0 (https://cryptic-bastion-69594.herokuapp.com/)
https://github.com/TinaHeiligers/findme
Findme2.0 (https://findme.tinkerantreats.com/)
https://github.com/TinaHeiligers/findmemore
More info
You might not need Redux
https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367