Redux - негласный победитель Flux соревнований, одна из трендовых библиотек 2015 года. Слишком "сырой" для продакшена? Нет, мы так не думаем! Используя силу функционального подхода и модель Event Sourcing'a, Redux позволяет гибко управлять состоянием вашего приложения. В докладе мы расскажем про то, как мы, используя связку Redux+React, переписали с нуля front-end одного из наших продуктов (Лидсканер | leadscanner.ru). Рассмотрим реальные плюсы и минусы данного стека, в частности: работу с side-effects, повторное использование компонентов, тестируемость.
Структура:
Про нас.
Какие перед нами стояли вызовы.
Многоуровневая архитектура.
Обзор Flux архитектуры.
Redux - Predictable state container for JavaScript apps.
React как view layer.
Повторное использование компонентов.
Dumb and Smart components.
Feature Folders.
Работа с side effects.
Обзор подходов организации actionCreators.
Middlewares.
Redux-saga.
Минусы данного стека.
3. ABOUT USABOUT US
- finds leads from social media in
real-time
LeadScanr
Front-End, MLFull stack
Ievgen TerpilVyacheslav Pytel
@JenyaTerpil@vyacheslav_de
13. REDUXREDUX
function counter(state = 0, action) {
switch (action.type) {
case 'DEPOSIT':
return state + action.value
case 'WITHDRAW':
return state - action.value
default:
return state
}
}
REDUCERREDUCER
Changes are made with pure functions
20. REACT AS VIEW LAYERREACT AS VIEW LAYER
react-redux
connect(
mapStateToProps,
mapDispatchToProps
)(Account)
function mapStateToProps(state, ownProps) {
return { balance: state.balance }
}
function mapDispatchToProps(dispatch) {
return {
onDepositClick: () => dispatch(deposit())
}
}
22. REACT AS VIEW LAYERREACT 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
decorator
23. DUMB AND SMARTDUMB AND SMART
Dumb (Presentational)
Presentational and Container Components
Smart (Container)
real view
uses only props
DOM markup and styles
functional components
logic
Redux's connect
binds cb for dumb
DOM markup and styles
reusable
your mini Bootstrap
36. FEATURE FOLDERSFEATURE FOLDERS
our solutions
import-glob
import reducers from './features/**/reducers.js';
generator-redux-component
yo redux-component
import actions from './features/**/actions.js';
account/
Account.js
x
actions.js
reducres.js
button/
Button.jsx
b-button.scss
Smart (feature) Dump
37. 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 -SIDE EFFECTS - ADVANCED USAGEADVANCED USAGE
50. CONCLUSIONCONCLUSION
flux redux
redux: (state, action) => state
use feature folders
create collection of Dumb components
side-effects:
easy complex
redux-thunk
redux-promise
redux-saga
i
51. THANK YOU FOR YOURTHANK YOU FOR YOUR
ATTENTIONATTENTION
Ievgen TerpilVyacheslav Pytel
@JenyaTerpil@vyacheslav_de
Slawaq terpiljenya
LeadScanr
You can find animated version here