Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Michał Michalczuk

March 10, 2017
Tweet

More Decks by Michał Michalczuk

Other Decks in Programming

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