A brief introduction to Redux

Redux is a state container for JavaScript apps. In this talk we discuss some basic ideas of functional programming and how they relate to the three rules of Redux.

Transcript

1. A BRIEF INTRODUCTION TO REDUX @knicklabs
3. IMPERATIVE PROGRAMMING ➤ A program is expressed as a series of statements. ➤ Control-flow structures may be used to conditionally execute statements or execute statements repeatedly. ➤ As statements are executed, the state of a program changes. ➤ Data may be mutable.
4. const a = [1, 2, 3]; const b = a.push(4);
5. a == [1, 2, 3, 4] b == 4
6. FUNCTIONAL PROGRAMMING ➤ FP is declarative. A program expresses what things are not what to do. ➤ If you say a =5 you cannot later say a = 6 because 5 != 6. ➤ You can also declare that the sum of a list of numbers is the first number (head) plus the sum of the remainder (tail) as a function (f(x)). ➤ Functions have no side effects and data is immutable.
7. REFERENTAIL TRANSPARENCY ➤ A function calculates something and returns a result. ➤ Given the same input, a function always produces the same output. ➤ You can prove that a function is correct. ➤ You can string together correct functions to compose solutions to more complex problems.
8. const a = Immutable.List.of(1, 2, 3); const b = a.push(4 );
9. a == [1, 2, 3] b == [1, 2, 3, 4]
10. What does any of this have to do with Redux?
11. “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. You can use Redux together with React, or with any other view library. It is tiny (2kB) and has no dependencies. Source: https://github.com/rackt/redux
12. THE FIRST RULE OF REDUX THERE IS ONE STATE
13. // This can be your state: 1 // This can be your state:
 [1, 2, 3] // Or this can be your state: {todos: [{ task: ‘Do something’, completed: false }]}
14. function todosReducer(state = {}, action) { return state; }; // The state is stored inside a store. let store = createStore(reducer);
15. THE SECOND RULE OF REDUX THE STATE IS IMMUTABLE
16. READ-ONLY STATE ➤ You can not write to or modify the state. ➤ The only way you can get data into or remove data from the application is by dispatching an action. ➤ An action is just a plain javascript object. ➤ An action is the minimal description of how the state should change.
17. // This is an action
 { type: ‘RESET_FILTERS’ } // And so is this
 {
 type: ‘CREATE_TODO’,
 task: ‘Do that thing’
 }
18. // Create a store
 let store = createStore(todosReducer); // Dispatch action to get data into the 
 // application.
 store.dispatchAction({
 type: ‘CREATE_TODO’,
 task: ‘Do that thing’
 });
19. THE THIRD RULE OF REDUX DESCRIBE STATE MUTATIONS
 WITH PURE FUNCTIONS
20. THE REDUCER ➤ A pure function is one where the return value is determined by the inputs - it has referential transparency. ➤ The reducer is a pure function. ➤ The reducer takes the previous application state and an action as parameters. ➤ The reducer returns a new application state. ➤ It does not modify the previous application state!
21. function todosReducer(state = {}, action) { switch (action.type) {
 case ‘CREATE_TODO’:
 return Object.assign({}, state, {
 todos: state.todos.concat([{task: action.task}]) 
 });
 default:
 return state;
 } }; 
 let store = createStore(reducer); // Subscribe to updates store.subscribe(() => console.log(store.getState()) );
22. PUTTING IT ALL TOGETHER Action Creators Reducers Store Dispatch action Previous State & Action New State User 
 Interface Subscribe to state change
23. LEARN MORE ➤ The README
 https://github.com/rackt/redux ➤ The official docs
 http://redux.js.org/ ➤ Getting Started with Redux with Dan Abramov 
 https://egghead.io/series/getting-started-with-redux ➤ Live editing time travelling goodness
 https://github.com/gaearon/redux-devtools ➤ ImmutableJS
 https://facebook.github.io/immutable-js/
24. YOU MAY ALSO LIKE ➤ The Elm Language
 http://elm-lang.org/