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
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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
   }
   ]
   }
   

   View Slide

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!'
    })
    

    View Slide

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
    }
    }
    

    View Slide

12. Coding Session
    Code show session
    Show me the code
    

    View Slide

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

    View Slide

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

    View Slide

15. Coding Session
    Code show session
    Show me the code
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. Coding Session
    Code show session
    Show me the code
    

    View Slide

21. Podsumowanie
    21
    

    View Slide

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/
    

    View Slide

23. Dziękuję za uwagę
    

    View Slide