1. How to Write Bad
code in Redux
Adam Klein

2. Developer, Consultant, Trainer
CEO @ 500Tech
Adam Klein

3. common
misconception
Redux is a single source of truth

5. opinionated toolbox and best practices

6. Immutability

7. lodash/fp
Immutability

8. lodash/fp
Immutability
set('inner.property', 'value', state);

9. lodash/fp
Immutability
set('inner.property', 'value', state);
{
...state,
inner: {
...state.inner,
property: 'value'
}
}

10. lodash/fp
Immutability
set('inner.property', 'value', state);
{
...state,
inner: {
...state.inner,
property: 'value'
}
}

11. const newState = { ...state };
newState.inner.property = 'newValue';
3rd party libraries
<NastyThirdPartyComponent myProp={ myImmutableState }>
</NastyThirdPartyComponent>
Immutability

12. Immutability
redux-freeze

13. Immutability
use only in development
redux-freeze

14. Immutability
ImmutableJS
redux-freeze

15. don’t deep clone the state

16. ComponentsState

17. ComponentsState
Deep Clone

18. ComponentsState

19. ComponentsState
Minimal change

20. Immer
const nextState = produce(baseState, draftState => {
draftState.push({todo: "Tweet about it"})
draftState[1].done = true
})
Immutability

21. Reducers

22. Reducers
import { handleActions } from 'redux-actions';
const myReducer = handleActions(
{
[MY_ACTION]: (state: MyState, action: MyAction): MyState =>
set('key', action.payload, state)
},
...
);

23. Reducers
import { handleActions } from 'redux-actions';
const myReducer = handleActions(
{
[MY_ACTION]: (state: MyState, action: MyAction): MyState =>
set('key', action.payload, state)
},
...
);

24. Selectors

25. Reselect
Selectors
state valueFunctionstate value

26. Selectors
state
value
access
Function
state
computed
value
Reselect

27. Selectors
state
value
access
Function
state
computed
value
Reselect

28. Selectors
state
value
access
Function
state
computed
value
Reselect

29. // reducer
return {
products: action.payload,
activeProducts: action.payload.filter(...)
}
Selectors

30. // reducer
return {
products: action.payload,
activeProducts: action.payload.filter(...)
}
Selectors

31. // reducer
return {
products: action.payload,
activeProducts: action.payload.filter(...)
}
Selectors

33. const mapStateToProps = (state) => ({
activeProducts: selectActiveProducts(state)
});
using a selector
Selectors

34. Selectors
- store
- reducers
- selectors
- actions

35. Selectors
posts comments
selector
reducer reducer
- store
- reducers
- selectors
- actions

36. Side-Effects

37. Side-Effects
Middlewares

38. Side-Effects
Middlewares
API
Middleware
Start Loading
End Loading
Success ActionFetch Action

39. Side-Effects
Middlewares
thunk
saga
redux-observable

40. Side-Effects
Middlewares
thunk
saga
redux-observable

41. State
Design

42. State
Design

43. {
users: {
1: {
id: 1,
name: 'User1'
},
2: {
id: 2,
name: 'User2'
}
},
selectedUserIds: {
1: true
}
}
State
Design

44. {
users: {
1: {
id: 1,
name: 'User1'
},
2: {
id: 2,
name: 'User2'
}
},
selectedUserIds: {
1: true
}
}
State
Design

45. {
users: {
1: {
id: 1,
name: 'User1'
},
2: {
id: 2,
name: 'User2'
}
},
selectedUserIds: {
1: true
}
}
Reload server data
State
Design

46. {
users: {
1: {
id: 1,
name: 'User1'
},
2: {
id: 2,
name: 'User2'
}
},
selectedUserIds: {
1: true
}
}
Save & restore from
Localstorage
State
Design

47. Code Reuse

48. User Reducer:
user: {
isLoading: true,
data: {...}
}
jobs: {
isLoading: true,
data: {...}
}
Jobs Reducer:
etc.
Code Reuse

49. User Reducer:
user: {
isLoading: true,
data: {...}
}
jobs: {
isLoading: true,
data: {...}
}
Jobs Reducer:
etc.
Code Reuse

50. User Reducer:
user: {
isLoading: true,
data: {...}
}
jobs: {
isLoading: true,
data: {...}
}
Jobs Reducer:
etc.
Code Reuse

51. const START_LOADING = 'START_LOADING';
const END_LOADING = 'END_LOADING';
pendingRequests: {
user: 1,
jobs: 0
}
network actions network reducer
Code Reuse

52. pendingRequests: {
user: 1,
jobs: 0
}
Code Reuse

53. pendingRequests: {
user: 1,
jobs: 0
}
Code Reuse
user: {
pendingRequests: 1
},
jobs: {
pendingRequests: 0
}

54. pendingRequests: {
user: 1,
jobs: 0
}
Code Reuse
user: {
pendingRequests: 1
},
jobs: {
pendingRequests: 0
}

55. next(action);
dispatch(startLoading(action.payload.label));
makeRequest(...)
.then(() => dispatch(endLoading(action.payload.label)))
.catch(() => dispatch(endLoading(action.payload.label)));
API middleware
Code Reuse

56. next(action);
dispatch(startLoading(action.payload.label));
makeRequest(...)
.then(() => dispatch(endLoading(action.payload.label)))
.catch(() => dispatch(endLoading(action.payload.label)));
API middleware
FETCH_USER
log
Code Reuse

57. next(action);
dispatch(startLoading(action.payload.label));
makeRequest(...)
.then(() => dispatch(endLoading(action.payload.label)))
.catch(() => dispatch(endLoading(action.payload.label)));
FETCH_USER
START_LOADING (‘user’)
log
Code Reuse
API middleware

58. next(action);
dispatch(startLoading(action.payload.label));
makeRequest(...)
.then(() => dispatch(endLoading(action.payload.label)))
.catch(() => dispatch(endLoading(action.payload.label)));
FETCH_USER
START_LOADING (‘user’)
END_LOADING (‘user’)
log
Code Reuse
API middleware

59. next(action);
dispatch(startLoading(action.payload.label));
makeRequest(...)
.then(() => dispatch(endLoading(action.payload.label)))
.catch(() => dispatch(endLoading(action.payload.label)));
FETCH_USER
START_LOADING (‘user’)
END_LOADING (‘user’)
log
Code Reuse
API middleware

60. const reducer = compose(
withLoading
withSelection
withTags,
withPermissions
)(usersReducer)
Higher-order reducers
Code Reuse

61. Our boilerplate
https://bitbucket.org/500tech/react-redux-project-boilerplate

63. Redux Masterclass
https://www.meetup.com/React-il

64. Time for Questions