Redux: A Predictable State Container for JavaScript Apps

Transcript

1. REDUX "A PREDICTABLE STATE CONTAINER FOR JAVASCRIPT APPS"
3. STATE
4. STATE / TIME
5. @tgriesser
6. WHY REDUX?
7. A LITTLE BACKGROUND:
8. Facebook's Flux Architecture
14. Enter Redux
15. i m p o r t i s P l a i n O b j e c t f r o m ' . / u t i l s / i s P l a i n O b j e c t ' ; e x p o r t v a r A c t i o n T y p e s = { I N I T : ' @ @ r e d u x / I N I T ' } ; e x p o r t d e f a u l t f u n c t i o n c r e a t e S t o r e ( r e d u c e r , i n i t i a l S t a t e ) { i f ( t y p e o f r e d u c e r ! = = ' f u n c t i o n ' ) { t h r o w n e w E r r o r ( ' E x p e c t e d t h e r e d u c e r t o b e a f u n c t i o n . ' ) ; } v a r c u r r e n t R e d u c e r = r e d u c e r ; v a r c u r r e n t S t a t e = i n i t i a l S t a t e ; v a r l i s t e n e r s = [ ] ; v a r i s D i s p a t c h i n g = f a l s e ; f u n c t i o n g e t S t a t e ( ) { r e t u r n c u r r e n t S t a t e ; } f u n c t i o n s u b s c r i b e ( l i s t e n e r ) { l i s t e n e r s . p u s h ( l i s t e n e r ) ; v a r i s S u b s c r i b e d = t r u e ; r e t u r n f u n c t i o n u n s u b s c r i b e ( ) { i f ( ! i s S u b s c r i b e d ) r e t u r n ; i s S u b s c r i b e d = f a l s e ; v a r i n d e x = l i s t e n e r s . i n d e x O f ( l i s t e n e r ) ; l i s t e n e r s . s p l i c e ( i n d e x , 1 ) ; } ; } f u n c t i o n d i s p a t c h ( a c t i o n ) { i f ( ! i s P l a i n O b j e c t ( a c t i o n ) ) { t h r o w n e w E r r o r ( ' A c t i o n s m u s t b e p l a i n o b j e c t s . ' + ' U s e c u s t o m m i d d l e w a r e f o r a s y n c a c t i o n s . ' ) ; } i f ( t y p e o f a c t i o n . t y p e = = = ' u n d e f i n e d ' ) { t h r o w n e w E r r o r ( ' A c t i o n s m a y n o t h a v e a n u n d e f i n e d " t y p e " p r o p e r t y . ' + ' H a v e y o u m i s s p e l l e d a c o n s t a n t ? ' ) ; } i f ( i s D i s p a t c h i n g ) { t h r o w n e w E r r o r ( ' R e d u c e r s m a y n o t d i s p a t c h a c t i o n s . ' ) ; } t r y { i s D i s p a t c h i n g = t r u e ; c u r r e n t S t a t e = c u r r e n t R e d u c e r ( c u r r e n t S t a t e , a c t i o n ) ; } f i n a l l y { i s D i s p a t c h i n g = f a l s e ; } l i s t e n e r s . s l i c e ( ) . f o r E a c h ( l i s t e n e r = > l i s t e n e r ( ) ) ; r e t u r n a c t i o n ; } f u n c t i o n r e p l a c e R e d u c e r ( n e x t R e d u c e r ) { c u r r e n t R e d u c e r = n e x t R e d u c e r ; d i s p a t c h ( { t y p e : A c t i o n T y p e s . I N I T } ) ; } d i s p a t c h ( { t y p e : A c t i o n T y p e s . I N I T } ) ; r e t u r n { d i s p a t c h , s u b s c r i b e , g e t S t a t e , r e p l a c e R e d u c e r } ; }
17. MAIN IDEAS: Single Source of Truth Unidirectional Data Flow Read Only State
18. MAIN IDEAS: Enforces Immutability Composable "It's all just functions"
20. ACTIONS { t y p e : ' S O M E _ V A L U E ' / / R e q u i r e d , u s u a l l y a s t r i n g p a y l o a d : { } }
21. DISPATCHER / / S t o r e d i s p a t c h e s a n a c t i o n s t o r e . d i s p a t c h ( { t y p e : ' S O M E _ V A L U E ' p a y l o a d : { / * . . . * / } } )
22. REDUCER c o n s t i n i t i a l S t a t e = { } f u n c t i o n r e d u c e r ( s t a t e = i n i t i a l S t a t e , a c t i o n ) { r e t u r n s t a t e ; }
23. REDUCER c o n s t i n i t i a l S t a t e = [ ] ; f u n c t i o n r e d u c e r ( s t a t e = i n i t i a l S t a t e , a c t i o n ) { s w i t c h ( a c t i o n . t y p e ) { c a s e L O G _ E V E N T : r e t u r n [ a c t i o n . p a y l o a d , . . . s t a t e ] } r e t u r n s t a t e ; }
24. SUBSCRIBE s t o r e . s u b s c r i b e ( ( ) = > { / / T h i s i s c a l l e d e v e r y t i m e a n y t h i n g c h a n g e s . . . l e t c u r r e n t S t a t e = s t o r e . g e t S t a t e ( ) } )
25. Demo
26. HOW DO YOU TAP IN AND LOG THOSE ANSWERS
28. e x p o r t d e f a u l t f u n c t i o n t h u n k M i d d l e w a r e ( { d i s p a t c h , g e t S t a t e } ) { r e t u r n n e x t = > a c t i o n = > t y p e o f a c t i o n = = = ' f u n c t i o n ' ? a c t i o n ( d i s p a t c h , g e t S t a t e ) : n e x t ( a c t i o n ) ; }
29. i m p o r t i n v a r i a n t f r o m ' f b j s / l i b / i n v a r i a n t ' ; e x p o r t d e f a u l t f u n c t i o n c h e c k ( a c t i o n N a m e , h a n d l e r ) { i n v a r i a n t ( t y p e o f h a n d l e r = = = ' f u n c t i o n ' , ' T h e c h e c k h a n d l e r m u s t n o t b e u n d e f i n e d . ' ) ; r e t u r n s t o r e = > n e x t = > f u n c t i o n c h e c k C o n t a i n e r ( a c t i o n ) { t r y { i f ( a c t i o n . t y p e = = = a c t i o n N a m e ) { i f ( a c t i o n . m e t a & & a c t i o n . m e t a . s o u r c e = = = ' s o c k e t ' ) { r e t u r n n e x t ( a c t i o n ) ; } r e t u r n h a n d l e r ( s t o r e , n e x t , a c t i o n . p a y l o a d , a c t i o n ) } r e t u r n n e x t ( a c t i o n ) } c a t c h ( e ) { c o n s o l e . e r r o r ( ` $ { a c t i o n . t y p e } : $ { e . m e s s a g e } \ n $ { e . s t a c k } ` ) ; } } }
30. [ c h e c k ( N A V I G A T E , ( s t o r e , n e x t , { l o c a t i o n : { p a t h n a m e } , c a l l b a c k } ) = > { n e x t ( s h o w S p i n n e r ( ) ) ; l e t i s E a g e r = h a s V i s i t e d R o u t e ( s t o r e , s t r i p P a t h ( p a t h n a m e ) ) i f ( i s E a g e r ) { c a l l b a c k ( ) ; n e x t ( h i d e S p i n n e r ( ) ) ; } a x i o s . g e t ( ' / a p i ' + p a t h n a m e ) . t h e n ( ( { d a t a } ) = > { n e x t ( r e p l a c e D a t a ( d a t a ) ) i f ( ! i s E a g e r ) { n e x t ( m a r k V i s i t e d ( s t r i p P a t h ( p a t h n a m e ) ) ) c a l l b a c k ( ) ; n e x t ( h i d e S p i n n e r ( ) ) ; } } ) . c a t c h ( e r r = > { c o n s o l e . e r r o r ( e r r . m e s s a g e ) ; c o n s o l e . l o g ( e r r . s t a c k ) ; } ) } ) ]
31. INTEGRATING WITH LIBRARIES
32. i m p o r t r o o t R e d u c e r f r o m ' . / r e d u c e r s ' ; i m p o r t { c r e a t e S t o r e } f r o m ' r e d u x ' ; c o n s t r e d u c e r = c r e a t e S t o r e ( r o o t R e d u c e r ) ; < P r o v i d e s t o r e = { s t o r e } > < Y o u r A p p R o o t C o m p o n e n t / > < / P r o v i d e > / / . . . l a t e r @ c o n n e c t ( s t a t e S e l e c t o r ) c l a s s S o m e C o n t a i n e r e x t e n d s C o m p o n e n t { r e n d e r ( ) { / / T h e p r o p s s e l e c t e d f r o m s t a t e a r e a v a i l a b l e a s p r o p s r e t u r n < S o m e C o m p o n e n t { . . . t h i s . p r o p s } / > } }
33. i m p o r t r e d u c e r s f r o m ' . / r e d u c e r s ' ; i m p o r t { c o m b i n e R e d u c e r s } f r o m ' r e d u x ' ; i m p o r t l o g g i n g M i d d l e w a r e f r o m ' . / l o g g i n g M i d d l e w a r e ' ; i m p o r t n g R e d u x f r o m ' n g - r e d u x ' ; a n g u l a r . m o d u l e ( ' a p p ' , [ n g R e d u x ] ) . c o n f i g ( ( $ n g R e d u x P r o v i d e r ) = > { l e t r e d u c e r = c o m b i n e R e d u c e r s ( r e d u c e r s ) ; $ n g R e d u x P r o v i d e r . c r e a t e S t o r e W i t h ( r e d u c e r , [ ' p r o m i s e M i d d l e w a r e ' , l o g g i n g M i d d l e w a r e ] ) ; } ) ;
34. Refactoring: Backbone
35. v a r S o m e V i e w = B a c k b o n e . V i e w . e x t e n d ( { i n i t i a l i z e : f u n c t i o n ( ) { t h i s . l i s t e n T o ( t h i s . m o d e l , ' c h a n g e : n a m e c h a n g e : p l a c e ' , t h i s . r e n d e r ) t h i s . r e n d e r ( ) } , r e n d e r : f u n c t i o n ( ) { t h i s . $ e l . r e n d e r ( t h i s . t e m p l a t e ( t h i s . m o d e l . t o J S O N ( ) ) ) ; r e t u r n t h i s ; } } ) ;
36. i m p o r t s h a l l o w E q u a l s f r o m ' s h a l l o w - e q u a l s ' c o n s t g e t N a m e A n d P l a c e = s t a t e = > ( { n a m e : s t a t e . n a m e , p l a c e : s t a t e . p l a c e } ) ; v a r S o m e V i e w = B a c k b o n e . V i e w . e x t e n d ( { i n i t i a l i z e ( ) { l e t c u r r e n t S t a t e = g e t N a m e A n d P l a c e ( s t o r e . g e t S t a t e ( ) ) t h i s . r e n d e r ( c u r r e n t N a m e A n d P l a c e ) ; t h i s . u n s u b s c r i b e = s t o r e . s u b s c r i b e ( ( ) = > { l e t n e x t S t a t e = g e t N a m e A n d P l a c e ( s t o r e . g e t S t a t e ( ) ) i f ( ! s h a l l o w E q u a l s ( c u r r e n t S t a t e , n e x t S t a t e ) ) { c u r r e n t S t a t e = n e x t S t a t e ; t h i s . r e n d e r ( n e x t S t a t e ) ; } } ) } , s t o p L i s t e n i n g ( ) { i f ( t h i s . u n s u b s c r i b e ) { t h i s . u n s u b s c r i b e ( ) t h i s . u n s u b s c r i b e = n u l l } } , r e n d e r ( p r o p s ) { t h i s . $ e l . r e n d e r ( t h i s . t e m p l a t e ( p r o p s ) ) ; r e t u r n t h i s ; } } ) ;
37. i m p o r t s h a l l o w E q u a l s f r o m ' s h a l l o w - e q u a l s ' c o n s t g e t N a m e A n d P l a c e = s t a t e = > ( { n a m e : s t a t e . n a m e , p l a c e : s t a t e . p l a c e } ) ;
38. i n i t i a l i z e ( ) { l e t c u r r e n t S t a t e = g e t N a m e A n d P l a c e ( s t o r e . g e t S t a t e ( ) ) t h i s . r e n d e r ( c u r r e n t N a m e A n d P l a c e ) ; t h i s . u n s u b s c r i b e = s t o r e . s u b s c r i b e ( ( ) = > { l e t n e x t S t a t e = g e t N a m e A n d P l a c e ( s t o r e . g e t S t a t e ( ) ) i f ( ! s h a l l o w E q u a l s ( c u r r e n t S t a t e , n e x t S t a t e ) ) { c u r r e n t S t a t e = n e x t S t a t e ; t h i s . r e n d e r ( n e x t S t a t e ) ; } } ) } ,
39. r e n d e r ( p r o p s ) { t h i s . $ e l . r e n d e r ( t h i s . t e m p l a t e ( p r o p s ) ) ; r e t u r n t h i s ; }
40. s t o p L i s t e n i n g ( ) { i f ( t h i s . u n s u b s c r i b e ) { t h i s . u n s u b s c r i b e ( ) t h i s . u n s u b s c r i b e = n u l l } } ,
41. Q: HOW IS THIS POSSIBLY EFFICIENT?? A: SELECTORS
42. RESELECT c o n s t r o o t C o m p a n i e s = s t a t e = > s t a t e . c o m p a n i e s e x p o r t c o n s t c o m p a n y B y I d = i d = > c r e a t e S e l e c t o r ( r o o t C o m p a n i e s , ( c o m p a n i e s ) = > c o m p a n i e s . g e t ( p a r s e I n t ( i d , 1 0 ) ) )
43. TESTING
44. IT'S ALL JUST FUNCTIONS, SO...
45. i m p o r t t e s t f r o m ' t a p e ' ; / / . . . t e s t ( ' t e s t m y s e l e c t S o m e S t a t e s e l e c t o r ' , f u n c t i o n ( t ) { t . p l a n ( 1 ) c o n s t s t o r e = c r e a t e S t o r e ( r e d u c e r , m o c k S t a t e ) s t o r e . s u b s c r i b e ( ( ) = > { t . d e e p E q u a l ( s e l e c t S o m e S t a t e ( s t o r e . g e t S t a t e ( ) ) , { a : 1 , b : 2 , c : 3 } ) } ) ; s t o r e . d i s p a t c h ( s o m e A c t i o n ( ) ) } ) ;
46. COMPONENT LOCAL STATE?
47. COMPONENT BOUNDARIES LET'S RECONSIDER
48. ENCAPSULATION mechanism of wrapping the data (variables) and code acting on the data (methods) together as as single unit.
50. DO WE REALLY NEED THIS?
51. WHAT IF WE JUST USED? HIGHER ORDER FUNCTIONS FUNCTION COMPOSITION
53. CHOOSE SIMPLICITY
54. ( s t a t e , a c t i o n ) = > s t a t e
55. THANKS!