REDUX: FP FOR THE WEB

Transcription

1 REDUX: FP FOR THE WEB Pratik Patel

2 ARCHITECTURAL LIB ONE WAY DATA FLOW USED WITH REACT (can also be used with ANGULAR)

3 WE WILL DISCUSS REDUX + REACT

4 ONE WAY DATA FLOW

5 ARCHITECTURAL PATTERN FLUX

6

7 NO DATA BINDING

8 REFLUX, FLUMMOX, ALT, etc FLUX IMPLEMENTATIONS

9 REDUX IS A FLUX IMPLEMENTATION

10 STORES ACTIONS REDUCERS

11 ACTION REDUCER NEW STATE

12 REDUX FLOW DIAGRAM

13

14 STATE TREE READ ONLY BASED ON PURE FUNCTIONS

15 begins by thinking about application state data structure Designing a Redux app

16 application state is all stored in one single tree structure

17 PREVIOUS STATE + ACTION REDUCER NEW STATE

18 REDUCER TRANSFORMS PREVIOUS STATE TO NEW STATE

19

20 STORES

21 stores the state of your application over time REDUX STORES

22 receive actions that evolve the state from one version to the next REDUX STORES

23 CENTRAL POINT O F THE APP REDUX STORES

24

25 // here s where we )e the reducers to the store // and also set the ini)al state const store = createstore(rootreducer, ini)alstate)

26 ACTIONS

27 LAYER OF INDIRECTION REDUX ACTIONS

28 simple data structure that describes a change that should occur in your app state REDUX ACTIONS

29 description of a function call packaged into a little object REDUX ACTIONS

30

31 export func)on addtodo(text) { } return { type: types.add_todo, text }

32 REDUCERS

33 reducer should delegate to one of the core functions based on the type of the action REDUX REDUCER

34 main reducer function only hands parts of the state to lower-level reducer functions REDUX ACTIONS

35

36 case ADD_TODO: return [ { id: state.reduce((maxid, todo) => Math.max(todo.id, maxid), -1) + 1, completed: false, text: ac)on.text },...state ]

37 WIRING

38 MUST CONNECT the REACT VIEW, STORE, AND REDUCER REDUX CONNECT

39 func)on mapstatetoprops(state) { return { todos: state.todos } } func)on mapdispatchtoprops(dispatch) { return { ac)ons: bindac)oncreators(todoac)ons, dispatch) } }

40 export default connect( mapstatetoprops, mapdispatchtoprops )(App)

41 The STATE TREE MAPS TO REACT COMPONENT PROPS STATE -> PROPS

42 STATE TREE MIRRORS COMPONENT TREE MIRRORED TREES

43 ACTIONS AND DATA PASSED AS PROPS PA R EN T-C H I LD

44

45 class App extends Component { render() { const { todos, ac)ons } = this.props return ( <div> <Header addtodo={ac)ons.addtodo} /> <MainSec)on todos={todos} ac)ons={ac)ons} /> </div> ) }

46 const store = configurestore() render( <Provider store={store}> <App /> </Provider>, document.getelementbyid('root') )

47 ACTIONS PROVIDER AS PROPS REACT STATE AS PROPS ROOT COMP

48 WA L KT H R O U G H

49 // VIEW REQUESTS ACTION <bu_on classname="destroy" onclick={() => deletetodo(todo.id)} />

50 ACTION IS DISPATCHED automatically (due to bindactioncreators) DISPATCH

51 STORE RECEIVES ACTION, sends current state and action to ROOT reducer STORE

52 // ACTION defini)on export func)on deletetodo(id) { return { type: types.delete_todo, id } }

53 // REDUCER does some work to manipulate state tree case DELETE_TODO: return state.filter(todo => todo.id!== ac)on.id )

54 root Reducer constructs final new state tree, returns it to the store REDUCER -> STORE

55 REPLACES THE OLD STATE TREE WITH THE NEW ONE FROM REDUCER STORE

56 STORE tells view layer binding there is new state STORE -> VIEW

57 view layer binding GETS THE NEW STATE FROM STORE VIEW <- STORE

58 view layer binding triggers a re-render with new state VIEW -> RENDER

59 WHERE S THE FUNCTIONAL PROGRAMMING PART?

60 STATE TREE IS NEVER MANIPULATED - new tree is always created from old IMMUTABLE DATASTRUCTS

61 NO SIDE-EFFECTS PURE FUNCTIONS

62 USE OPERATIONS LIKE MAP, REDUCE, FILTER FP STYLE

63 WHY IS THIS BETTER?

64 EASIER TO understand COMPLEXITY EASIER TO MANAGE EASIER TO TEST

65 WHAT DIDN T WE COVER?

66 TESTING SMART Vs DUMB COMPONENTS SUB REDUCERS

67 THANK YOU References: