Redux - how does it work

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

Bb0a01a2311e4828a7e6dc721142ce0b?s=128

Michał Michalczuk

March 10, 2017
Tweet

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ę