What the -dux?

A introduction to Redux internals, patterns, and best practices.

Transcript

1. What the -dux? Ari Rizzitano, AppNeta @arizzitano A qu(a)ck and dirty intro to Redux
2. Who what where?
3. Why Redux?
4. ❤ Why Redux? React & Redux
5. “State”? Wut? • Application data stored in browser memory • May be persisted server-side • Can be simple (“isMenuOpen”) or complex (“visualizationTimeseries”)
6. Redux • Lightweight, functional, framework-agnostic JS state manager • Similar to Flux, inspired by Elm patterns • Easily debuggable and testable
7. Three Principles • Single source of truth • State is read-only • Changes are made with pure functions
8. Read Flow component store
9. Write Flow dispatch action creator action reducer store component
10. Action • Role of a message or event • Required field: type • Created by action creators • Consumed by reducers
11. Action
12. Action { type: ADD_TODO, text: ‘Feed the cat’ }; { type: TOGGLE_MENU, open: false };
13. Action Creator • Function that returns an action • Invoked inside dispatch calls • This is where actions are defined
14. Action Creator
15. Action Creator export const ADD_TODO = ‘ADD_TODO’; export function addTodo(todo) { return { type: ADD_TODO, todo }; }
16. dispatch • The only public way to change the store • Invokes action creators • Broadcasts actions so they can be consumed by reducers
17. dispatch
18. dispatch let todoText = ‘Feed the cat’; dispatch(addTodo(todoText));
19. Reducer • Receives all actions, but only consumes some • Uses actions’ type to find the ones it wants • May mutate the data it receives from actions • Returns a chunk of the store (subtree)
20. Reducer
21. Reducer
22. Reducer import { ADD_TODO } from ‘./ActionCreators’; function todoList(state=[], action) { switch (action.type) { case ADD_TODO: return [ …state, action.todoText.trim() ]; default: return state; } }
23. Store • Holds a single, read-only global state tree • Can ONLY be modified by reducers. You cannot modify it directly.
24. Store
25. Write Flow dispatch reducer store action creator action component
26. Metaphor Caveats • dispatch delivers ALL actions to ALL reducers — the reducers decide which actions are theirs. • The store holds the return values of ALL reducers • Reducers are bundled together into one RootReducer
27. connect() • Provides interface between React and Redux • Allows a component to read state and call dispatch
28. connect() ❓ ❓
29. connect() @connect(mapStateToProps, mapDispatchToProps) export default class TodoList extends React.Component { // . . . } function mapStateToProps(state) { // . . . } function mapDispatchToProps(dispatch) { // . . . }
30. mapStateToProps function mapStateToProps(state) { return { todoList: state.todoList }; }
31. mapStateToProps @connect(mapStateToProps, mapDispatchToProps) export default class TodoList extends React.Component { render() { // todoList is now available as a prop! let todoList = this.props.todoList; } } function mapStateToProps(state) { return { todoList: state.todoList }; }
32. mapDispatchToProps import { addTodo } from ‘./ActionCreators’; function mapDispatchToProps(dispatch) { return { onTodoAdd: todoText => dispatch( addTodo(todoText) ) }; }
33. mapDispatchToProps import { addTodo } from ‘./ActionCreators’; function mapDispatchToProps(dispatch) { return { onTodoAdd: todoText => dispatch( addTodo(todoText) ), onTodoComplete: todoIndex => dispatch( completeTodo(todoIndex) ) }; }
34. mapDispatchToProps @connect(mapStateToProps, mapDispatchToProps) export default class TodoList extends React.Component { handleAddButtonClick(e) { this.props.onTodoAdd(this.state.newTodoText); } } function mapDispatchToProps(dispatch) { return { onTodoAdd: . . ., onTodoComplete: . . . }; }
35. Thunk • Action creator that returns a function • Can call dispatch to fire another action creator • Good for async stuff (e.g. calling dispatch after an XHR response)
36. Testing • Redux functions are pure • Return value only determined by input values • No side effects, no dependencies, no mocks • No excuse not to test!
37. Testing • Thunks do have side effects, so dispatch and store need to be mocked • Use a library (redux-mock-store) or DIY • No need to test dispatch or store
38. Testing • Redux code can be tested separately from React • Redux recommends Mocha • Avoid plugins/helpers if possible • https://github.com/gaearon/redux-devtools
39. Learn More • http://redux.js.org • https://github.com/reactjs/redux/ • https://egghead.io/series/getting-started-with- redux • #redux in Reactiflux on Discord • #rackt on freenode
40. Fin