react + redux. Опыт использования

React + ReduxОпыт использования

@Provectus

Timofey Lavrenyuk

Небольшая история…

В чем была ошибка?

Front End

is just the "V" part

React

React app structure (min)

• View

• Controllers, Actions, etc…

• Router

• Data flow

React data flow

• Component state

• Flux

• Redux

• Relay

FluxData architecture, not framework or library

ReduxState management library

RelayJavascript framework for building data-driven real applications

Redux React

Main Principles

• Single source of truth

• State is read-only

• Changes are made with pure functions

Redux flow

Все намного проще…

• попробовать Redux без React

• попробовать Redux + React (redux-connect)

• использовать ES2016 (ES7)

Redux без React

Redux + React

redux-connect - модуль для биндинга

redux store в react компонент

Совет: использовать connect как декоратор (ES2016)

Стала ли жизнь лучше с Redux?

Жизнь - нет, а разработка - да• состояние не зависит от компонента и один

action может менять много состояний

• легче найти состояние и отделить action

• легче debugging

• состояние (и его историю) легко сохранить

(например в базу или localstorage)

• server rendering

Что нового в server rendering?

До Redux

После Redux

index.html

store.js

Какая ближайшая альтернатива Redux?

MobX

MobXSimple, scalable state management

Спасибо за внимание!