32
Redux (previousState, action) => newState

React & Redux

Embed Size (px)

Citation preview

Page 1: React & Redux

Redux

(previousState, action) => newState

Page 2: React & Redux

Who Am I?

Developer at MojoTech

Brian Egizi

Page 3: React & Redux

React

Page 4: React & Redux

Virtual DOM

Page 5: React & Redux

Why is the DOM hard?

● Slow● Difficult to maintain state● Difficult to test

Page 6: React & Redux

Virtual DOM

● Decoupled● Optimized● In-Memory● Consistent API

Page 7: React & Redux

JSX

Page 8: React & Redux

JSX

● Virtual DOM API Preprocessor● HTML like syntax for building components● Keeps developers sane by giving them a familiar

view paradigm

Page 9: React & Redux

JSX vs HTML

<div className=”my-klass”>

<h1>Hello, world</h1>

</div>

<div class=”my-klass”>

<h1>Hello, world</h1>

</div>

Page 10: React & Redux

Components

Page 11: React & Redux

Components are awesome because...

● Reusable● Composable● Testable● Easily maintained

Page 12: React & Redux

<HelloWorld />

class HelloWorld extends React.Component { render() { return ( <h1>Hello, world!</h1> ); }}

Page 13: React & Redux

One Way Data Flow

Data passed from parent as props

<Counter count={0} />

Page 14: React & Redux

Using a prop

class Counter extends React.Component { render() { return ( <div> Counter Value {this.props.count} &nbsp; <button>+</button> <button>-</button> </div> ); }}

Page 15: React & Redux

One Way Data Flow (cont.)

Events bubble up to parents via callbacks

<Counter count={0} onIncrement={this.handleIncrement} />

Page 16: React & Redux

Using a callback

class Counter extends React.Component { render() { return ( <div> Counter Value {this.props.count} &nbsp; <button onClick={this.props.onIncrement}>+</button> </div> ); }}

Page 17: React & Redux

Redux

Page 18: React & Redux

Redux Principles

● The state is the single source of truth● The state is read only● State changes are made with pure functions

Page 19: React & Redux

Flux

Page 20: React & Redux
Page 21: React & Redux

Redux

Page 22: React & Redux
Page 23: React & Redux

Store connect(mapStateToProps)(Component)

Page 24: React & Redux

Benefits of a single application store

● Single Source of Truth● State can easily be reverted to a previous or

predetermined state and the full application reflects the change (Read as “Dead simple UNDO/REDO”)

● Testing

Page 25: React & Redux

Actions{ type: “LOAD_NEXT_SLIDE”, transition: “move_up”}

Page 26: React & Redux

Anatomy of an Action

{ // Actions are just objects

type: “SOME_ACTION_TYPE”, // Some indicator of type

payload: 3 // Anything else to include with the action

}

Page 27: React & Redux

Reducers (previousState, action) => newState

Page 28: React & Redux

Anatomy of a Reducer

function applicationReducer(state, action) {

switch (action.type) {

case “SOME_ACTION_TYPE”:

return { myNewNumber: action.payload };

default:

return state;

}

}

Page 29: React & Redux

Putting it all together (demo)

Page 30: React & Redux

Helpful Tools and Plugins

● Redux Dev Tools https://github.com/gaearon/redux-devtools

● DevTools Chrome Extension https://github.com/zalmoxisus/redux-devtools-extension

● redux-thunk https://github.com/gaearon/redux-thunk

● redux-api-middleware https://github.com/agraboso/redux-api-middleware

Page 31: React & Redux

Questions?

Page 32: React & Redux

Thanks!Demos available at github.com/begizi/react-symposium