This document discusses Redux best practices and tooling for immutable state management including: - Using lodash/fp for immutable updates and the set function. - Libraries like redux-freeze for freezing state in development. - Selectors for accessing specific state values and computing derived data with libraries like Reselect. - Common side effect middlewares like thunk, saga, and redux-observable. - Recommendations for state design including nesting related data and higher order reducers for concerns like loading state.

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 valueFunctionstate valueReselect

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 ActionFetch 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