Минусы Facebook Flux

  • Dispatcher как Singleton
  • Вся архитектура на сайд-эффектах
  • Это не фреймворк, а библиотечка Pub/Sub

Давайте немного про ФП?

 

 

  • Всегда предсказуемое состояние
     
  • Никак не зависим от окружения
     
  • Контроль над зависимыми событиям
     
  • Высокая отказоустойчивость
     
  • Просто прекрасные дев-тулы

2 + 2 = 4

сервер, браузер... да хоть мобильное приложение

ну, это для тех, кто побывал в колбечном аду

чистые функции не ломаются

ивент-сорсинг, тайм-тревел и остальное счастье

Store

Как один Immutable object

Current State

Final State

New State

Action

New State

Action

Action

Давайте спрячем Dispatcher

В Store!

store.dispatch({
    type: INCREMENT,
    data: {amount}
})

store.subscribe(callback)

Action-creators

сделаем чистыми функции

  • Отсутствие диспетчера
  • Возвращает Action как плоский объект
function increment(amount) {
    return {
        type: INCREMENT,
        data: {amount}
    }
}

Stores => Reducers

так-же чистые функции

function counter(number = 0, action) {
    const {type, data} = action
    return type == INCREMENT ? number + data.amount : number
}
  • не сохраняют состояние
  • не зависят от окружения

А где сайд-эффекты?

  • API calls
  • Logging
  • Reporting
  • ...

Middleware

Redux flow

Action Creator

Middlewares

Reducers

Store

UI

dispatch

Side-effects

Middleware

  • Централизованные сайд-эффекты
  • Единственное отличие
    - сервера от клиента,
    - прод от дев окружения
  • Единый Code-base!

Делайте крутые проекты!

Роман Якобчук

Skype: r.iakobchuk

Email: r.iakobchuk@gmail.com

Redux for react course

By Roman Iakobchuk

Redux for react course

  • 1,743