React and Redux

Transcript

1. REACT + REDUX Anton Pchelkin, MQD Frontend
2. TRADITIONAL MV* FRAMEWORKS FLOW • Separation of concerns: • Model: data • Controller: display logic • View: templates (HTML + custom attributes) • Components are coupled: when you change one, you have to change the others • So it is separation by technology (HTML, JS) • Inner micro-languages (iterators, directives) and concepts (scope)
3. REACT JS • Everything is component • Separation of responsibility • Uni-directional data flow • UI description and logic are tighly coupled inside components • Easy to debug • Semantic is plain JavaScript
4. REACT JS • JSX • HTML-like markup • Declarative description of UI inlined in JS code • Combines templating engine with power of JS • No custom semantics • Translates to JS during development or offline with React CLI
5. REACT JS • Re-renders everything on every update • Virtual DOM • Calculates diff of every component’s DOM • Update only changed parts, so updates are optimised
6. REACT JS • Simple API • React.createClass() • React.render() • Data passed down from parents to child by properties • Properties are immutable, but can transform to component state • Lifecycle methods (componentDidMount, componentWillMount, componentDidUpdate) • Great docs
7. REDUX • What to do with interactions? • Redux manages application state with minimal API • Flux architecture realisation • (previousState, action) => newState
8. REDUX • Single source of truth • The state of your whole application is stored in an object tree within a single store • store.getState()
9. REDUX • State is read-only • The only way to change the state is to emit an action, an object describing what happened. <button onClick={dispatch({ type: 'COMPLETE_TODO', index: 1 })}> Complete todo </button>
10. REDUX • Changes are made with pure functions • To specify how the state tree is transformed by actions, you write pure reducers function todos(state = [], action) { switch (action.type) { case 'COMPLETE_TODO': return state.map((todo, index) => { if (index === action.index) { return Object.assign({}, todo, { completed: true }) } return todo }) default: return state } } let store = createStore(todos)
11. LINKS – https://facebook.github.io/react/ – https://facebook.github.io/react/docs/thinking-in-react.html – https://www.youtube.com/watch?v=h3KksH8gfcQ – http://redux.js.org/docs/introduction/ThreePrinciples.html – http://redux.js.org/ – https://facebook.github.io/flux/
12. THANKS FOR LISTENING! Anton Pchelkin, MQD Frontend