Redux - how does it work

Explanation of how redux works based on rxjs and applied to simple jquery based application.

code: https://github.com/michalczukm/ngrx-store-short-example

Transcript

1. redux - how does it work? kod do prezentacji: https://github.com/michalczukm/ngrx-store-short-example Michał Michalczuk
2. 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.
3. 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
4. Redux a Flux 4 • Influences Redux evolves the ideas of Flux, but avoids its complexity by taking cues from Elm.
5. 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
6. 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
7. redux - jako wzorzec 7 http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
8. redux - jako wzorzec 8 http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
9. 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 } ] }
10. 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!' })
11. 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 } }
12. Coding Session Code show session Show me the code
13. No dobra, ale .. Co z komunikacją z API? Co z requestami HTTP? 13
14. Komunikacja z API 14 http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
15. Coding Session Code show session Show me the code
16. Co dalej? 16 http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
17. Co dalej? 17 http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
18. Co dalej? 18 http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
19. No dobra, To może jakiś przykład z Angular? ngrx/store 19
20. Coding Session Code show session Show me the code
21. Podsumowanie 21
22. 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/
23. Dziękuję za uwagę