redux - how does it work? kod do prezentacji: https://github.com/michalczukm/ngrx-store-short-example Michał Michalczuk 

Redux 2 Czym jest Redux? (za dokumentacją) • Redux is a predictable state container for JavaScript apps. • It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. • On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger. 

Redux 3 Czym jest Redux? (za dokumentacją) • Redux is a predictable state container for JavaScript apps. • It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. • On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger. Konkretna biblioteka 

Redux a Flux 4 • Influences Redux evolves the ideas of Flux, but avoids its complexity by taking cues from Elm. 

To kojarzy mi się tylko z React-em 5 Dlaczego? ● flux jako wzorzec został opisany przez Facebook-a ● Flux jako biblioteka został napisany przez Facebook-a ● Facebook + React 

Ale … można ich używać niezależnie od frameworku 6 ● wiele implementacji fluxa ● wiele bindingów do konkretnych bibliotek, jak angularJS, angular, vue.js, jquery, react 

redux - jako wzorzec 7 http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production 

redux - jako wzorzec 8 http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production 

redux - 3 zasady 9 1. Single source of truth • The state of your whole application is stored in an object tree within a single store. { todos: [ { text: 'Consider using Redux', completed: true, }, { text: 'Keep all state in a single tree', completed: false } ] } 

redux - 3 zasady 10 2. State is read-only • The only way to change the state is to emit an action, an object describing what happened. store.dispatch({ type: 'ADD_TODO', text: 'Get it done!' }) 

redux - 3 zasady 11 3. 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 'ADD_TODO': return [ ...state, { text: action.text, completed: false } ] default: return state } } 

Coding Session Code show session Show me the code 

No dobra, ale .. Co z komunikacją z API? Co z requestami HTTP? 13 

Komunikacja z API 14 http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production 

Coding Session Code show session Show me the code 

Co dalej? 16 http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production 

Co dalej? 17 http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production 

Co dalej? 18 http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production 

No dobra, To może jakiś przykład z Angular? ngrx/store 19 

Coding Session Code show session Show me the code 

Podsumowanie 21 

Linki / Referencje 22 kod do prezentacji: https://github.com/michalczukm/ngrx-store-short-example redux: ● http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production ● http://redux.js.org/docs/introduction/ThreePrinciples.html ● redux + rxjs + react: http://rudiyardley.com/redux-single-line-of-code-rxjs/ ● jquery + Redux: https://codepen.io/mdd/pen/wGRqbw/?editors=1010 ● http://www.sohamkamani.com/blog/2016/06/05/redux-apis/ ngrx/store: ● https://github.com/ngrx/example-app ● http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/ 

Dziękuję za uwagę