How to Write Bad Code in Redux

We've been using Redux since it just started, and we learned a lot from dozens of projects, big and small.
This is a taste of a collection of tools and best practices that work great for us.

Transcript

1. Opinionated Redux our toolkit and best practices Adam Klein
2. Developer, Consultant, Trainer CEO @ 500Tech Adam Klein
4. Tools & Best Practices
5. Immutability
6. lodash/fp Immutability
7. lodash/fp Immutability set('inner.property', 'value', state);
8. lodash/fp Immutability set('inner.property', 'value', state); { ...state, inner: { ...state.inner, property: 'value' } }
9. lodash/fp Immutability set('inner.property', 'value', state); { ...state, inner: { ...state.inner, property: 'value' } }
10. lodash/fp Immutability redux-freeze
11. lodash/fp Immutability use only in development redux-freeze
12. lodash/fp Immutability ImmutableJS redux-freeze
13. Reducers
14. Reducers import { handleActions } from 'redux-actions'; const myReducer = handleActions( { [MY_ACTION]: (state: MyState, action: MyAction): MyState => set('key', action.payload, state) }, ... );
15. Reducers import { handleActions } from 'redux-actions'; const myReducer = handleActions( { [MY_ACTION]: (state: MyState, action: MyAction): MyState => set('key', action.payload, state) }, ... );
16. Selectors
17. Selectors - store - reducers - selectors - actions
18. Selectors posts comments selector reducer reducer - store - reducers - selectors - actions
19. Selectors state value Function state value Reselect
20. Selectors state value access Function state computed value Reselect
21. Selectors state value access Function state computed value Reselect
22. Selectors state value access Function state computed value Reselect
23. Side-Effects
24. Side-Effects Middlewares
25. Side-Effects Middlewares API Middleware Start Loading End Loading Success Action Fetch Action
26. Side-Effects Middlewares thunk saga redux-observable
27. Side-Effects Middlewares thunk saga redux-observable
28. State Design
29. State Design
30. { users: { 1: { id: 1, name: 'User1' }, 2: { id: 2, name: 'User2' } }, selectedUserIds: { 1: true } } State Design
31. { users: { 1: { id: 1, name: 'User1' }, 2: { id: 2, name: 'User2' } }, selectedUserIds: { 1: true } } State Design
32. { users: { 1: { id: 1, name: 'User1' }, 2: { id: 2, name: 'User2' } }, selectedUserIds: { 1: true } } Reload server data State Design
33. { users: { 1: { id: 1, name: 'User1' }, 2: { id: 2, name: 'User2' } }, selectedUserIds: { 1: true } } Save & restore from
 Localstorage State Design
34. { network: { users: 1 } } State Design
35. State Design { network: { users: 0 } }
36. State Design { users: { pendingRequests: 1, data: { ... } }, groups: { pendingRequests: 1, data: { ... } } } { network: { users: 0, groups: 0 } }
37. State Design const reducer = compose( withLoading withSelection withTags, withPermissions )(usersReducer) Higher-order reducers
39. Time for Questions