Redux : How I learned to stop worrying and love my application state

A short story about how redux made our state management more bearable.

Transcript

1. How I learned to stop worrying or Redux and love my application state
2. State is evil
3. State is (a necessary) evil
4. React is great because it makes our UI a function of our application state! UI = f(state)
5. React is great because it makes our UI a function of our application state! UI = f(state) Root (stateful) List Item Item Head Thing Button Button Avatar
6. React is great because it makes our UI a function of our application state! UI = ~f(state) Root (stateful) List Item Item Head Thing Button (stateful) Button (stateful) Avatar
7. React is great because it makes our UI a function of our application state! UI = ~f(states) Root (stateful) List Item Item Thing Button (stateful) Button (stateful) Avatar Head (stateful)
8. React is great because it makes our UI a function of our application state! UI = ~f(state) Root (stateful) List Item Item Head Thing Button (stateful) Button (stateful) Avatar We can diligently promote state to the highest common ancestor, but this becomes a burden quickly
9. Action Dispatcher Store View Action
10. Action Dispatcher Store View Action alt vanilla flummox fluxette flexor freezer-js lux marty material-flux mcfly nuclear-js reflux fluxible
11. Action Dispatcher Store View Action alt vanilla flummox fluxette flexor freezer-js lux marty material-flux mcfly nuclear-js reflux fluxible
12. Action Dispatcher Store View Action Redux
13. Redux Dan Abramov ̣ Written as a demo for React- Europe ̣ Made to enable hot reloading of store/reducer logic and time travel debugging ̣ Go watch his talk https:// www.youtube.com/watch? v=xsSnOQynTHs
14. Action Dispatcher Reducers View Action Redux
15. All state is kept in a single store
16. Selectors Reducers Actions UI (Component Tree) Server (or whatever) State Triggers Triggers Receives previous state with action Returns new state Selects relevant subset of global state updates component hierarchy
17. Reducers Action State + Whatever is observing the State
18. f(state, action) -> nextState f(accumulator, item) -> accumulator [1, 2, 3].reduce( (accum, num) => accum + num, 0 ) Why are they called reducers?
19. const lights = createReducer({ [LOAD_STATE] (state, action) { const lights = action.payload.lights return { ...state, ...lights } }, }) An almost real-life reducer
20. The API surface is tiny createStore(reducer, [initialState]) combineReducers(reducers) applyMiddleware(...middlewares) bindActionCreators(actionCreators, dispatch) compose(...functions)
21. Making your state available to react import { Provider } from ‘react-redux’ import store from ‘./myStore’ reactDom.render( <Provider store={store}> <App /> </Provider> )
22. Connected vs. “Dumb” Components import { connect } from ‘react-redux’ connect(mapStateToProps)(Component) function mapStateToProps (state) { /* Do some selectin’ */ return { prop1, prop2,…, propN } } Only connected components know about redux
23. function Component (props) { const { props1,..., propsN } = props return <div /> // Do more than this, m’kay? } Even the connected Component itself can be a pure render function
24. Redux is great because it makes our UI a function of our application state! (mostly) UI = ~f(state) Root (connected) List Item Item Thing Button (stateful) Button (stateful) Avatar Head (connected)
25. David Manning @davidlymanning on Twitter dlmanning everywhere else