Using Redux in a large team is not easy. Organization and best practices can help scaling the team. Tip 1 : Planed 1 full day of training for each member Tip 2 : Tooled our environment Tip 3 : Used action creators Tip 4 : Redux Ducks Tip 5 : Write Unit tests Tip 6 : Use payload-based actions Tip 7 : Frontend development is all about side-effects Tip 8 : Normalized the state like a db Tip 9 : Selectors are helpful Tip 10 : Flow and typescript helped Matters is a startup studio based in Paris and San Francisco. To know more about us: https://matters.tech

1. Redux at scale
@matterstech
by Baptiste
@batmansmk

2. I assume you know
Redux.

3. 20 frontend devs
5 apps desktop, PWA, native
130+ action types / app

4. Matters is a startup studio

5. Redux scaled with:
- our team size
- the form factors supported
- the number of features in the apps
This is how we did it.

6. 1/ Planed 1 full day of
training for each member

7. Official documentation
Videos on Egghead from @dan_abramov
Code

8. Make a little quizz!
- What is a selector?
- How much RAM does an
immutable state use?
- What is a normalized state?

9. 2/ Tooled our env

10. const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
);
https://github.com/zalmoxisus/redux-devtools-extension

11. add

12. 3/ Used action
creators

13. // 1 - Defining in our components got messy.
const action = {type: 'my-app/users/ADD', {id:
1, name:'Bat'}}
3/ Action creators
// 2 - Better in ./users.js
export const addUser = payload => ({type: 'my-
app/users/ADD', payload})
// and get the action in another file
import {addUser} from '../redux/users'
const action = addUser({id: 1, name:'Bat'})

14. - defines an API
- defines an explicit dependency
component <=> action
- are convenient with react-redux
3/ Action creators

15. // 1 - instead of
const mapDispatchToProps = dispatch => {
return {
addUser: payload => dispatch({type:'my-app/users/
ADD',payload})
}
}
const connect(null, mapDispatchToProps)(MyComponent)
3/ Actions creators are convenient
// 2 - with action creators
import {addUser} from './redux/users'
const connect(null, {addUser})(MyComponent)

16. 4/ Redux ducks

17. 4/ Redux ducks

18. const ADD = 'my-app/users/ADD';
export default function reducer(state = {}, action = {})
{
switch (action.type) {
ADD: return {
...state,
[action.payload.id]: action.payload
}
default: return state;
}
}
// Action Creators
export function addUser(payload) {
return { type: ADD, payload };
}
4/ Redux ducks

19. Redux ducks is sufficient for us.*
* tested up to our capability.

20. 5/ Write Unit tests

21. Redux ❤ TDD so much

22. 0
15
30
45
60
without test with tests
dev ut dev maintenance ut maintenance
Mitigated Unit tests ROI in
frontend

23. Possible causes of bad ROI on automated
testing?
Frontend code changes too often to have good
ROI with systematic Unit Testing.
https://www.future-processing.pl/blog/object-oriented-metrics-by-robert-martin/

24. 0
15
30
45
60
all js no test all js with tests redux only no test redux with tests
dev ut dev maintenance ut maintenance

25. 6/ Use payload-based
actions

26. export const editName = name => ({type:'users/edit-name',
name});
export const editEmail = email => ({type:'users/edit-email',
email});
// can be often simplified to
export const edit = payload => ({type:’users/edit', payload});
6/ Payload-based actions

27. With Payload-based actions,
reducers are simpler

28. 7/ Frontend development
is all about side-effects

29. redux-thunk
didn't scale.
let’s talk about redux-thunk.

30. Redux co-creator
after he saw
redux-thunk
in our codebase

31. We were more successful with
redux-sagas.*
* Ask me more details, doesn’t fit in the talk!

32. 8/ Normalized the
state like a db

33. 8/ Normalization

35. // 1 - instead of
const state = {
users: [
{ id: 1, name: "Alan", groups: [{ name: "Dog" }, { name: "Cat" }] },
{ id: 2, name: "Chloe", groups: { name: "Dog" } },
{ id: 1, name: "Marvis", groups: { name: "Cat" } }
]
};
// 2- Normalize and index by primary key
const state = {
users: {
1: { id: 1, name: "Alan", groups: [1, 2] },
2: { id: 2, name: "Chloe", groups: [1] },
3: { id: 3, name: "Marvis", groups: [2] }
},
groups: {
1: { id: 1, name: “Dog” },
2: { id: 2, name: "Cat" }
}
};
8/ Normalize state

36. 9/ Selectors are
helpful

37. export const getGroupsById = (state, ids) => ids.map(
id => state.groups[id]
)
export const getUsersWithGroupsById = (state, ids) => ids.map(id
=> ({
...state.users[id],
groups: getGroupsById(state.users[id].groups)
}))
9/ Selectors

38. 10/ Flow and
Typescript helped

39. 1/ Plan 1 day of training
2/ Tool the env
3/ Action creators
4/ Structure in modules
5/ TDD
6/ Payload-based actions
7/ Side-effects are 95% of the problem
8/ Normalize the state
9/ Selectors are helpful
10/ Types

40. @matterstech
Thanks!
Any questions?