ABOUT US

LeadScanr - finds leads from social media in real-time

INITIAL POINT

- Framework without improvements

- File structure

- Scalability

- Build tools

IDEAL APP

- framework with community

- easy to implement new features

- easy to support

- easy to test

FLUX

REduX

@dan_abramov

REduX

(state, action) => state 

REDUX

REduX

{
    type: 'DEPOSIT',
    value: 10
}

Action

REduX

function counter(state = 0, action) {
  switch (action.type) {
  case 'DEPOSIT':
    return state + action.value
  case 'WITHDRAW':
    return state - action.value
  default:
    return state
  }
}

Reducer

REduX

State

state tree

REduX

const store = 
    createStore(reducer, initialState)

store.subscribe(render)

// -----------------------------------
store.dispatch(action)

STore

REduX

const App = ({ state }) => {
    <div>
        Balance: {state}
    </div>
}

VIEW

VIEW LAYER

redux

react-redux

ng-redux

........

REACT AS VIEW LAYER

REACT AS VIEW LAYER

Account = ({ balance, onDepositClick }) => {
    <div>
        <button onClick={onDepositClick}>
            deposit
        </button>
        <div>Balance: {balance}</div>
    </div>
}

REACT AS VIEW LAYER

react-redux

connect(
  mapStateToProps,
  mapDispatchToProps
)(Account)

REACT AS VIEW LAYER

@connect(({ Subscriptions, Profile }) => ({
  currentPlan: Subscriptions.get('currentPlan'),
  userName: Profile.get('userName')
}))
export default class Subscriptions extends React.Component {

  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    userName: PropTypes.string,
    currentPlan: PropTypes.object
  }

  ...

}

our case with ES7

DUMB AND SMART

Dumb (Presentational)

Presentational and Container Components

Smart (Container)

SIDE EFFECTS

SIDE EFFECTS

SIDE EFFECTS - BASE APPROACH

{ type: 'FETCH_ACCOUNT_REQUEST' }
{ type: 'FETCH_ACCOUNT_SUCCESS', account: { ... } }
{ type: 'FETCH_ACCOUNT_FAILURE', error: 'Oops' }

actions

SIDE EFFECTS - BASE APPROACH

redux-thunk

let getAccount = id => dispatch => {
  dispatch(requestAccount(id));
  return fetch('/account', id)
    .then(account => dispatch(receiveAccount(account)))
    .catch(error => dispatch(throwError(error)));
 };

complex action creator

redux-api-middleware

import { CALL_API } from `redux-api-middleware`;

{
  [CALL_API]: {
    endpoint: 'api/account',
    method: 'GET',
    types: ['REQUEST', 'SUCCESS', 'FAILURE']
  }
}

action creators

SIDE EFFECTS - LESS BOILERPLATE

SIDE EFFECTS - LESS BOILERPLATE

FEATURE FOLDERS

FEATURE FOLDERS

view

actions

reducers

i

i

i

feature1

feature2

feature3

FEATURE FOLDERS

view

actions

reducers

i

i

i

feature1

feature2

feature3

set of standart components

FEATURE FOLDERS

view

actions

reducers

i

i

i

feature1

feature2

feature3

set of standart components

main reducer

FEATURE FOLDERS

view

actions

reducers

i

i

i

feature1

feature2

feature3

set of standart components

main reducer

all actions

FEATURE FOLDERS

our solutions

import-glob

import reducers from './features/**/reducers.js';

import actions from './features/**/actions.js';

redux-promise 

- if it receives a promise, it will dispatch the resolved           value of the promise

export function getAccount() {
  return async (api) => {
    return {
      type: events.ACCOUNT_READY,
      account: await api.options.account.get()
    };
  };
}

our case with ES7

SIDE EFFECTS - ADVANCED USAGE

Action Creator

Service 1

Service 2

Service 3

A

A

A

SIDE EFFECTS - ADVANCED USAGE

Action Creator

Service 1

Service 2

Service 3

A

A

A

SIDE EFFECTS - ADVANCED USAGE

Action Creator

Action Creator

SIDE EFFECTS - ADVANCED USAGE

applyMiddlewares(middleware1, middleware2, ...)

redux-chain-middleware

dispatch([
    startProcessCard(),
    setCreditCard(card),
    getOffers(),
    buy(plan.get('id')),
    pushState(null, '/account', {})
  ]);

SIDE EFFECTS - ADVANCED USAGE

SAGA

orchestrating complex/asynchronous operations

Saga

Service 1

Service 2

Service 3

REDUX-SAGA

Generator functions (ES6) as action creators

1

function* watchFetchAccount() {
  yield* takeEvery('ACCOUNT_REQUESTED', fetchAccount)
}

REDUX-SAGA

Declarative Effects

{
  CALL: {
    fn: Api.fetch,
    args: ['./account']  
  }
}

2

yield only a description of

the function invocation

REDUX-SAGA

Dispatching actions

import { call } from 'redux-saga/effects'

function* fetchAccount(dispatch) {
  const account = yield call(Api.fetch, '/account')
  dispatch({ type: 'ACCOUNT_RECEIVED', account })
}

REDUX-SAGA

Testing

const iterator = fetchAccount()

REDUX-SAGA API

Saga

take

put

call

A

Api

Dispatcher

CONCLUSION

flux

redux

CONCLUSION

flux

redux

redux:

(state, action) => state 

use feature folders

i

THANK YOU FOR YOUR ATTENTION

Ievgen Terpil

Vyacheslav Pytel

@JenyaTerpil

@vyacheslav_de

Slawaq

terpiljenya

LeadScanr