Redux at scale
1 like253 views
Redux scaled at a startup with 20 frontend developers working on 5 apps by: 1) Providing training to standardize Redux implementation. 2) Structuring the codebase into modules with action creators and reducers. 3) Normalizing the state like a database to simplify reducers and use selectors.
![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](https://image.slidesharecdn.com/redux-presentation-180329150952/85/Redux-at-scale-18-320.jpg)
![// 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](https://image.slidesharecdn.com/redux-presentation-180329150952/85/Redux-at-scale-35-320.jpg)
![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](https://image.slidesharecdn.com/redux-presentation-180329150952/85/Redux-at-scale-37-320.jpg)
Redux at scale
- 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
- 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
- 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
- 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