![🤩 Tests are blissfully easy to write: Reducers are pure
functions. Just test that given an input, they yield the right
output.
it('handles ADD_ITEM by adding the item', () => {
const initialState = fromJS({
todos: [
{id: 1, text: 'React', status: 'active'}
]
});
const action = {
type: 'ADD_ITEM',
text: 'Redux'
}
const nextState = reducer(initialState, action);
expect(nextState).to.equal(fromJS({
todos: [
{id: 1, text: 'React', status: 'active'},
{id: 2, text: 'Redux', status: 'active'},
]
}));
});](https://image.slidesharecdn.com/frontconfslides-171208222201/85/FrontConf2017-Enhance-your-User-and-Developer-Experience-with-React-Redux-26-320.jpg)
#FrontConf2017 — Enhance your User (and Developer) Experience with React & Redux
- 1. Enhance your User (and Developer) Experience with React & Redux & /phacks
- 2. Hi! I am Nicolas Goutay. I work at Theodo, a web consultancy based in Paris & London. I build JS & Python web applications. I like music, typography and I have stage fright am excited to be here with all of you. You can find me online (Twitter & GitHub) on @phacks.
- 3. React & Redux A Lego analogy
- 4. React would be a Lego instruction manual, where bricks are DOM nodes. It takes care of how things look for the end user.
- 5. test te fort veau jean jean humain loup travers des gout bon bonbon cher non How to build a F1
- 6. On modern Web apps, how things look are usually a function of user interactions. In this analogy, the user is Elya, my 5 year-old niece. Red is her favorite color, so she wants the car to be red 🏎.
- 7. This is where 🤖 Redux kicks in.
- 8. # “I want the car to be red.” 🤖 “Dispatch the CHANGE_CAR_COLOR action with the payload color: red” $ “OK! I take note that you want your car red…” 🤖 “A reducer will process the action, and will add color: red to the Redux store” $ “…I sift through all the messy Legos to find red bricks…” 🤖 “The store passes the property color: red to React components” $ “…and I follow the instructions again with the red bricks”
- 9. test te fort veau jean jean humain loup travers des gout bon bonbon cher non How to build a F1 Redux store color: red
- 10. # “I want the car number to by my age, not yours” 🤖 “Dispatch the CHANGE_CAR_NUMBER action with the payload number: 5” $ “Oh there we go again. 5 it is…” 🤖 “A reducer will process the action, and will add number: 5 to the Redux store” $ “…Where on Earth did I put this sticker…” 🤖 “The store passes the property number: 5 to React components” $ “…there you go! Now go find your parents 😅”
- 11. test te fort veau jean jean humain loup travers des gout bon bonbon cher non How to build a F1 Redux store color: red number: 5
- 12. Redux — Now with actual code export function changeCarColor(color) { return { type: 'CHANGE_CAR_COLOR', color } } 🤖 “Dispatch the CHANGE_CAR_COLOR action with the payload color”
- 13. Redux — Now with actual code function formulaOneApp(state = {}, action) { switch (action.type) { case 'CHANGE_CAR_COLOR': return Object.assign({}, state, { color: action.color }) default: return state } } 🤖 “A reducer will process the action, and will add color to the Redux store”
- 14. Redux — Now with actual code 🤖 “The store passes the properties color and number to React components” import React from 'react' const FormulaOne = ({ color, number }) => ( <div> <CarBody color={color} /> <Decorations number={number} /> </div> )
- 15. Developer Experience — Easier Debugging
- 16. Developer Experience — Easier Debugging
- 17. Developer Experience — Easier Debugging This is what the Redux Store of my current project look like. I can inspect every variable, which are updated in real time.
- 18. User Experience — Built-in Performance
- 19. User Experience — Built-in Performance React components are only repainted when their props or inner state change. React API methods like shouldComponentUpdate allow us to have a finer-grained control about render performance.
- 20. Developer Experience — “Reasonaboutability”
- 21. Developer Experience — “Reasonaboutability” React developer Jani Eväkallio coined the term “reasonaboutability” (easiness to reason about). I love it, and it matches perfectly what I feel about Redux. Here are the Three Principles of Redux:
- 22. Developer Experience — “Reasonaboutability” React developer Jani Eväkallio coined the term “reasonaboutability” (easiness to reason about). I love it, and it matches perfectly what I feel about Redux. Here are the Three Principles of Redux: Single Source of Truth: all the data/UI state displayed on the app come from the same JS object. Facilitates debugging.
- 23. Developer Experience — “Reasonaboutability” React developer Jani Eväkallio coined the term “reasonaboutability” (easiness to reason about). I love it, and it matches perfectly what I feel about Redux. Here are the Three Principles of Redux: Single Source of Truth: all the data/UI state displayed on the app come from the same JS object. Facilitates debugging. State is read-only: The only way to change the state is to emit an action, an object describing what happened. Provides a single, robust & semantic way to deal with interactions.
- 24. Developer Experience — “Reasonaboutability” React developer Jani Eväkallio coined the term “reasonaboutability” (easiness to reason about). I love it, and it matches perfectly what I feel about Redux. Here are the Three Principles of Redux: Single Source of Truth: all the data/UI state displayed on the app come from the same JS object. Facilitates debugging. State is read-only: The only way to change the state is to emit an action, an object describing what happened. Provides a single, robust & semantic way to deal with interactions. Changes are made with pure functions: the Store can only be updated with pure functions (reducers). Prevents nasty side effects.
- 25. Redux comes with other benefits — and tradeoffs
- 26. 🤩 Tests are blissfully easy to write: Reducers are pure functions. Just test that given an input, they yield the right output. it('handles ADD_ITEM by adding the item', () => { const initialState = fromJS({ todos: [ {id: 1, text: 'React', status: 'active'} ] }); const action = { type: 'ADD_ITEM', text: 'Redux' } const nextState = reducer(initialState, action); expect(nextState).to.equal(fromJS({ todos: [ {id: 1, text: 'React', status: 'active'}, {id: 2, text: 'Redux', status: 'active'}, ] })); });
- 27. 🛠 Rich ecosystem: Redux has an API to plug-in middlewares. There are tons of them: for logging, offline capabilities, async, forms, optimistic UIs… Tip: 🔗 github.com/markerikson/react-redux-links is a great place to start!
- 28. 🤓 Code structure is key: Since all UI is derived from a single JS object, it needs to be carefully designed and constantly adjusted to business requirements. Tip: Learn from the best! Twitter & Pinterest both use Redux, and the structure is available for anybody to see with the React Dev Tools!
- 29. Tip: I just got used to it. After a while it even feels more productive than Angular 1, because you know exactly what to do to get everything to work together. 😓 Verbosity: to write a feature, you would usually need to write an action, a reducer, a selector, a saga… It feels quite cumbersome compared to Angular 1.
- 30. Conclusion React with Redux is a mature framework that empowers developers to produce better apps in a much better way.
- 31. Want to dive in? I wrote a full-featured, test-driven tutorial on writing a Todo List using React & Redux 🔗 http://github.com/phacks/redux-todomvc
- 32. Danke! Slides are available at phacks.github.io & /phacks