My Redux book is available here: https://leanpub.com/thinking-in-Redux Slides for my talk at ReactNYC. Ideas and patterns in Redux, based on "old-school" massaging patterns. Learn practical patterns and terms that will help you implement complex flow in your next application. This talk is framework agnostic. You can use this information both in React and Angular

1. Advanced
Patterns in Redux
Nir Kaufman

2. Nir Kaufman
@nirkaufman
Principal Front-end consultant
Google Developer Expert
Worldwide speaker and trainer

4. Agenda

5. Programming with messages.

6. Learn new terms to describe our flow.

7. Patterns and ideas.

8. Open your mind :)

9. Read this: https://goo.gl/rvQTGV .

10. Back in time

11. 1997
CD-ROM Included
https://goo.gl/ZcpHZt

12. C Q SCommand Query Separation

13. Command–query separation (CQS)
Every method should either be
a command that performs an action,
or a query that returns data to the
caller, but not both
- Meyer, Bertrand.

14. Command–query separation (CQS)
Every method should either be
a command that performs an action,
or a query that returns data to the
caller, but not both.
- Meyer, Bertrand.

15. Command–query separation (CQS)
Asking a question
should not change the answer.
“
- Meyer, Bertrand.

16. Command–query separation (CQS)
Commands
Change the state of a system,
but do not return a value.
- Martin Fowler.

17. Command–query separation (CQS)
Queries
Return a result and do not change
the observable state of the system.
- Martin Fowler.

18. Command–query separation (CQS)
Dispatcher StateCommands
Queries

19. Redux
UI StoreActions
Selectors

20. CQS & Redux
Separate methods that change
state from those that don't.

21. 2003
https://goo.gl/ZcpHZt
65 Messaging Patterns

22. Messaging Patterns

23. Middleware ReducerAction
Creator
Store
Action ProcessingConstruction
Redux

24. Middleware ReducerAction
Creator
Store
Action ProcessingConstruction
Side Effects

25. Middleware ReducerAction
Creator
Store
Action ProcessingConstruction
Action Construction

26. Action Categories
Events Command Document

27. Event
Notify of a change.
*more than one handler
{
type : APP_OFFLINE,
payload: data,
meta : {...}
}

28. Command
Invoke a procedure.
*one handler, expect a reply
{
type : GET_USER,
payload: data,
meta : {...}
}

29. Document
*no reply, one reducer
Transfer data.
{
type : PRODUCT,
payload: data,
meta : {...}
}

30. Routing Patterns
Filtering Mapping Splitter Aggregator

31. Routing Patterns
Filtering
if(action.type === GET_DATA) {
}

32. Routing Patterns
Mapping
if(action.type === GET_DATA) {
if(action.payload.force){
// decision based on content
}
}

33. Routing Patterns
Mapping
if(action.type === GET_DATA) {
if(process.env.dev){
// decision based on context
}
}

34. Routing Patterns
Splitter
if(action.type === GET_DATA) {
dispatch(API_REQUEST)
dispatch(APP_PENDING)
}

35. Transform Patterns
Enricher Normalizer Translator

36. Transform Patterns
Enricher
if(action.type === SUBMIT_ORDER) {
let action = {
...action,
created: new Date()
};
next(action)
}

37. Normalizer
if(action.type === API_SUCCESS) {
const users = action.payload.reduce(...);
next({ type: UPDATE_USERS, payload: users})
}
Transform Patterns

38. Translator
Transform Patterns
if(action.type === SHOW_LOADER) {
dispatch({type: TOGGLE_LOADER, payload: true})
}
if(action.type === HIDE_LOADER) {
dispatch({type: TOGGLE_LOADER, payload: false})
}

39. The real world

40. We want to keep it simple.

41. nirkaufman@gmail.com
ME.
@nirkaufman