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

Redux: Flux Reduced

sporto
August 31, 2015

Redux: Flux Reduced

sporto

August 31, 2015
Tweet

More Decks by sporto

Other Decks in Technology

Transcript

  1. Flux • Made popular by Facebook for building React applications

    • Old pattern (CQRS) with different naming for everything
  2. Flux Orders Stats 1 $400 2 $100 ... Countries 1

    Aus 2 Fra ... Aus $500 Fra $600 ... Today $ 100 ... • Makes state consistency across views much easier
  3. Server side rendering • Original flux, everything is a singleton

    • Make SSR much harder • Each request needs its own universe
  4. Request arrives Render Tree Pass everything Response Server side rendering

    Create users store Create orders store Create dispatcher
  5. What if we only have one state object? Users store

    Orders store Countries store Reduced to { users orders countries }
  6. Redux only has one big state tree Less things to

    create and pass around ORDERS COUNTRIES USERS STATE
  7. Now we can just move the dispatcher inside the state

    obj Dispatcher State Reduced to { dispatch, state: { users orders ... } }
  8. • Inspired by ELM updaters update action model = case

    action of Increment -> model + 1 Decrement -> model - 1
  9. function reducer(state, action) { switch(action.type) { case 'USERS_FETCH_SUCCESS': users =

    action.users return state.merge(users) ... } } Reducers in Redux
  10. Reducers in Redux • The expect you to return a

    copy of the state, not mutate it • This is great for debugging • Seamless-immutable is great for this
  11. redux View dispatch Async Action state Change Reducers Async Action

    creators Async action Request Response Action Run async action
  12. Not React specific anymore • Just an event and state

    management library • Can be used with other things e.g. ng-redux
  13. Interacting directly with the store import { createStore } from

    'redux' const store = createStore(reducers) store.getState() store.subscribe(listener) store.dispatch(action)
  14. With React import { createStore } from 'redux' import Provider

    from 'react-redux' const store = createStore({...}) React.render(( <Provider store={store}> {() => <App />} </Provider> ), mountNode);
  15. Redux-crud Building CRUD apps? • Standard actions creators and reducers

    for CRUD apps • https://github.com/Versent/redux-crud