React

Redux

ES 6 (20**)

Flow&& Functional thinking

Kovalenko Alexey || Lexx

Github: @xxllexx

Twitter: @fe_artist

By:

Functional

Thinking

Declarative Code

Declarative

Imperative

Functional Composition

Pattern Matching

f 0 = 1

f n = n * f (n-1)

Factorial

fib 0 = 0

fib 1 = 1

fib n = fib (n-1) + fib (n-2)

Fibonacci

Functional Programing

Pros & Cons

Shorter,

Clearer,

Maintainable code

Code re-use

…

+ Performance-

106.766ms

579.260ms

6966.808ms

Imperative Quicksort:

Functional Quicksort:

Array.sort:

Array(1,000,000)

Components

“Front-End” Components

Polymer

Web-Component

Angula 1.5

ng.component

Angula 2

@Component

Aurelia

ComponentEmber

Ember.Component

React

{Component} from ‘react’

Declarative

React makes it painless to create interactive UIs.

Design simple views for each state in your application,

and React will efficiently update and render just the

right components when your data changes.

Declarative views make your code more predictable

and easier to debug.

Component-Based

Build encapsulated components that manage their

own state, then compose them to make complex UIs.

Since component logic is written in JavaScript instead

of templates, you can easily pass rich data through

your app and keep state out of the DOM.

Type of React Components

Statefull Stateless

React Components shape

ES 6

Stateless

Statefull

ES 5

Where to store data ?

Flux Way

Flux ImplementationAction

Component

Store

Redux

1. Single source of truth

2. State is read-only

3. Changes are made with pure functions

Redux != Flux

• No Dispatcher concept

(Pure Reducer Function)

• No data mutation (Always new State object)

• Single Store

Redux toolbox

Redux toolbox

Actions

Reducers

Provider

Dispatch

Connect

bindActionCreators

Middleware

Store

Redux.createStore(reducers)

-> getState()

dispatch(action)

subscribe(listeners)

replaceReducer(nextReducer)

<Provider store={store}>

<App />

</Provider>

Redux.applyMiddleware

(…middleware)

(createStore)

(reducers);

const middleware = store => next => action => {

next(action);

}

connect(

mapStateToProps,

mapDispatchToProps

)(ReactComponent)

Store.dispatch(action);

{

type: ‘action-name’,

propKey: propValue

}

function(state, action) {

switch (action.type) {

case SOME_TYPE:

return {

…state,

…action

}

default:

return state;

}

}

bindActionCreators(

ActionList,

dispatch

)

React Components convention

Containers

Dumb

Redux Development steps

1) Define data structure

2) Define Key Actions

3) Create reducers

4) Create Store

5) ?Apply middleware

6) Attach Store to App through Provider

7) Attach state (store) props to Containers directly

Data Type

The small story about data types

Type in FP (Haskell)

someString :: [Char] -> [Char]

'a' :: Char

True :: Bool

"Hello" :: [Char]

(True, 'a') :: (Bool, Char)

4 == 5 :: Bool

Flowtype

Where to apply typing

?

everywhereProps description

Reducers Initial State Structure

Actions

Services

Any Other Function

Project Review

Key Points/Best Practices

1) Minimize view logic in smart components by extracting it into dumb components.

2) Smart components should always access state through selectors

3) Smart components are not allowed to have any logic except dispatching actions.

4) Place all business logic inside action handlers, selectors and reducers.

5) Prefer maps to arrays

6) Avoid modeling state for views

7) Never hold duplicate data in the app state

8) Never store derived data in the state

9) Use FP practices just for data, inside actions, reducers, services

10) Use Typing (Flow/TypeScript)

11) Enjoy programming!