Embed Size (px)
Citation preview
ReactJS binary-studio.com
React JSJS library focused on UI, not a framework
one-way data flow
VirtualDOM
UI = f(x)ReactJS
F - Component
x - state
MVC
Problems
Facebook problems
201430th of April
F8 Facebook Developer Conference
Flux
Flux
Flux
Action
Dispatcher
Store
View
● Instead of MVC for React● Unidirectional data flow● Created by Facebook● Many stores
Store
Store
...
DispatcherCentral hub that messages all data flow
It is a registry of callbacks into the store
=> mechanism to deliver actions into the stores Action
Dispatcher
Store
ViewStore
Store
...
Actionstriggered by the view
information about changes
Action
Dispatcher
Store
ViewStore
Store
...
Storeapplication state
reacts to specific actions
issue events when data or state updated Action
Dispatcher
Store
ViewStore
Store
...
ViewsTriggers actions
Reacts to specific events in the store
Action
Dispatcher
Store
ViewStore
Store
...
Race of Flux implementationsrelay
flux
alt
reflux
flummox
fluxible
fluxxor
marty.js
fynx
McFly
……..
Problems of FluxStore contains store change logic and state
The state is being rewritten with every action
Dispatcher cannot dispatch while dispatching
2015End of the race
Redux wins!
Why Redux?1. One global state
2. New state after each action (Time traveling)
3. State is read-only
4. Changes are made with pure functions (reducers)
5. Hot reload
Redux
View layer
Action
Dispatcher Store View
Provider Connect
( previousState, action ) => newState Basic principle
Redux flow - ActionWhenever you want to change the state of the application, you shoot off an action.
Action function returns a formatted action object
Redux flow - ReducerEvery reducer:
receive state
return new state
Not mutated old state! new one!
Redux flow - Store
Redux flow - Connect
Smart elementsHow things works
no DOM markup, no styles
Provide data
call actions
Dumb elementsHow things look
No app dependencies
Just props for data and callbacks
only UI state
Solved issues1. Delegation is easier
a. top-down props is not required
2. Separation of concerns
a. Data fetching => actions
b. Data decorations => reducer
c. view logic
3. State management
a. App-specific
b. Immutable
c. Maintainable
Redux SummaryOne store
Reducers === (previousState, action) => newState
State changes only in reducers
Structured code
We have access to state in every moment
Server-side EnvironmentsNode.js
ReactJS .NET
Nashorn
Tooling
React DevTools
Redux slider monitor
https://calesce.github.io/redux-slider-monitor/?debug_session=123
Webpack
WebpackLike Grunt or Gulp, but different
Bundles
Uses javascript modules
Reduce the amount of AJAX requests
Totally configurable
Webpack
http://webpack.github.io/docs/configuration.html
Entry - entry files, which WP will use
Webpack
http://webpack.github.io/docs/configuration.html
Output:● path - location where
webpack will build the files
● publicPath - location where wwbpack serves files from.
Webpack
http://webpack.github.io/docs/configuration.html
Loaders:● Like tasks ● Transform files● Preprocess files as you
require or import them.
Preloaders - the same but before executing loaders and building bundles
Webpack
http://webpack.github.io/docs/configuration.html
Plugins:● Like tasks ● Work with bundle
Webpack
http://webpack.github.io/docs/configuration.html
Bundles:● Lazy loading● Resource per page
WebpackPlugins
Loaders
Async build
Chunks
DevTools
Webpack-dev-serverWhen you need HTTP
Serves files virtually
Hot reload (works on socket.io)
Hot reload
Complementary-Toolshttps://github.com/facebook/react/wiki/Complementary-Tools
LinksRedux video: egghead
Flux: Rus/Eng
Redux: Rus/Eng
Demohttps://bitbucket.org/oleksandrkovalov/bsa-2016-react-demo-2
Thank you! Let’s redux!
