Redux: Flux Reduced

Transcript

1. Redux flux reduced @sebasporto
2. Flux • Made popular by Facebook for building React applications • Old pattern (CQRS) with different naming for everything
3. Flux View Dispatcher Action (Event) Users Store Posts Store Action (Event) Change Grab New state
4. 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
5. Component Singleton Flux Store Dispatcher Message Get state
6. Server side rendering • Original flux, everything is a singleton • Make SSR much harder • Each request needs its own universe
7. Server side rendering • Flux implementations without singletons started showing up • Alt, Fluxible, Flummox, etc
8. Request arrives Render Tree Pass everything Response Server side rendering Create users store Create orders store Create dispatcher
9. Problem • Too many things to instantiate and pass around
10. What if we only have one state object? Users store Orders store Countries store Reduced to { users orders countries }
11. Redux only has one big state tree Less things to create and pass around ORDERS COUNTRIES USERS STATE
12. Now we can just move the dispatcher inside the state obj Dispatcher State Reduced to { dispatch, state: { users orders ... } }
13. Redux is only one object 04 State Dispatch Redux store
14. Render Tree Pass store Response Server side rendering Create redux instance Request
15. Traditional flux case 'USERS_FETCH_SUCCESS': users = action.users state.push(users) break • We manage the state on the stores
16. What if we just describe the transformations?
17. • Inspired by ELM updaters update action model = case action of Increment -> model + 1 Decrement -> model - 1
18. function reducer(state, action) { switch(action.type) { case 'USERS_FETCH_SUCCESS': users = action.users return state.merge(users) ... } } Reducers in Redux
19. 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
20. The state is managed by Redux, you only describe the transformations
21. redux Redux View dispatch Action (Event) state Change Grab New state Reducers
22. Components of Redux
23. { type: 'USERS_FETCH_SUCCESS' users: [...] } Action
24. function fetchSuccess(users) return { type: 'USERS_FETCH_SUCCESS' users: [...] } } Action creator
25. const action = fetchSuccess(users) store.dispatch(action) Dispatch
26. function reducer(state, action) { switch(action.type) { case 'USERS_FETCH_SUCCESS': users = action.users return state.merge(users) } } Reducer
27. Interacting with the outside world? e.g. ajax
28. redux View dispatch Async Action state Change Reducers Async Action creators Async action Request Response Action Run async action
29. function fetch() return function(dispatch) { doSomeAjax(...) .then(function(response) { const successAction(response.data) dispatch(successAction) } } } Async Action creators
30. Middleware Middleware redux View dispatch Action Action
31. Middleware • Logging • Stoping unnecessary request • Async actions • Dev tools 04 03 02 01
32. redux View dispatch Action state Change Reducers Redux is really simple
33. Not React specific anymore • Just an event and state management library • Can be used with other things e.g. ng-redux
34. Interacting directly with the store import { createStore } from 'redux' const store = createStore(reducers) store.getState() store.subscribe(listener) store.dispatch(action)
35. With React import { createStore } from 'redux' import Provider from 'react-redux' const store = createStore({...}) React.render(( <Provider store={store}> {() => <App />} </Provider> ), mountNode);
36. Other cool stuff
37. Hot reloading • Works quite well most of the time • Will keep state intact
38. Dev tools
39. Time travel
40. Redux-crud Building CRUD apps? • Standard actions creators and reducers for CRUD apps • https://github.com/Versent/redux-crud
41. Thanks