Structuring your application story with sagas and selectors Rebecca - - PowerPoint PPT Presentation

▶
structuring your application story with sagas and
SMART_READER_LITE
LIVE PREVIEW

Structuring your application story with sagas and selectors Rebecca - - PowerPoint PPT Presentation

Dec 04, 2022 462 likes •966 views

Structuring your application story with sagas and selectors Rebecca Hill Software Engineer @ Usabilla @rebekaka What is business logic? Code that applies real-world business rules. What kinds of business logic are in the front-end? data

slide-1
SLIDE 1

Structuring your application story with sagas and selectors

Rebecca Hill Software Engineer @ Usabilla @rebekaka

slide-2
SLIDE 2

What is business logic?

Code that applies real-world business rules.

slide-3
SLIDE 3

What kinds of business logic are in the front-end?

async flow data manipulation conditionals

slide-4
SLIDE 4

What’s the problem with it?

It’s difficult to know where to put it.

slide-5
SLIDE 5

What apps are we talking about?

React… and Redux

slide-6
SLIDE 6

What do I need to know?

slide-7
SLIDE 7

data manipulation

slide-8
SLIDE 8

components

slide-9
SLIDE 9

reducers

slide-10
SLIDE 10

action creators / npm install redux-thunk

slide-11
SLIDE 11

selectors

slide-12
SLIDE 12

npm install reselect

slide-13
SLIDE 13

conditionals

slide-14
SLIDE 14

components

slide-15
SLIDE 15

action creators / npm install redux-thunk

slide-16
SLIDE 16

reducers

slide-17
SLIDE 17

async flow

slide-18
SLIDE 18

npm install redux-thunk

slide-19
SLIDE 19

npm install redux-observable

slide-20
SLIDE 20

npm install redux-saga

slide-21
SLIDE 21

examples

slide-22
SLIDE 22
slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25
slide-26
SLIDE 26
slide-27
SLIDE 27
slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30
slide-31
SLIDE 31
slide-32
SLIDE 32
slide-33
SLIDE 33
slide-34
SLIDE 34
slide-35
SLIDE 35
slide-36
SLIDE 36
slide-37
SLIDE 37
slide-38
SLIDE 38
slide-39
SLIDE 39
slide-40
SLIDE 40
slide-41
SLIDE 41
slide-42
SLIDE 42
slide-43
SLIDE 43
slide-44
SLIDE 44
slide-45
SLIDE 45
slide-46
SLIDE 46
slide-47
SLIDE 47
slide-48
SLIDE 48
slide-49
SLIDE 49

Thanks!

References/More Info

http://redux.js.org/docs/faq/CodeStructure.html https://github.com/reactjs/redux/issues/1171#issuecomment-167578578 https://stackoverflow.com/questions/35667249/accessing-redux-state-in-an-action-creator http://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/ https://github.com/reactjs/redux/issues/1400#issuecomment-184406378 https://medium.com/react-native-training/redux-4-ways-95a130da0cdc https://medium.com/@jeffbski/where-do-i-put-my-business-logic-in-a-react-redux-application-9253ef91ce1 https://github.com/joshwcomeau/key-and-pad

Rebecca Hill

Software Engineer at Usabilla Not-so-secretly helping JavaScript take over the world @rebekaka