Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

React, redux, reselect

Presentation about react, redux and reselect for barcampevn17
by

Sergey Hovakimyan

on 27 May 2017

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of React, redux, reselect

Small things that everybody needs to know about react.js
React.js is an open-source javascript library for building user interfaces.
React.js is not MVC framework!
React.js corresponds to View in the Model-View-Controller.
React.js allows developers to create single page web applications which can change data without reloading the page.
Main goal of React.js is to be fast and simple.
One-way data flow
Properties flow down; actions flow up
REACT
REDUX

RESELECT?

EVENT
Virtual DOM
React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM.
JSX
JavaScript extension syntax allowing quoting of HTML and using HTML tag syntax to render subcomponents.

Redux is a predictable state container for JavaScript apps.
You can use Redux together with React, or with any other view library.
Small things that everybody needs to know about redux
Single source of truth
It is important to know

State is read-only!
Changes are made with pure functions!
Pure and Impure functions
function square(x) {
return x * x;
}
function square(x) {
updateSomething(x)
return x * x;
}
pure
impure
REDUX architecture
Simple Action example
export function setData (data) {
return {
type: 'DATA',
payload: data
}
}
Simple reducers example
export function page(state, action) {
switch(action.type) {
case 'DATA':
return {
...state,
data: action.payload
}
default:
return state;
}
}
In Component we need to connect data from store to our component
function mapStateToProps(state) {
return {
data: state.data
}
}
function mapDispatchToProps() {
return {
setData
}
}
@connect(mapStateToProps, mapDispatchToProps)
export default class App extends Component ......
RESELECT
Selectors can compute derived data, allowing Redux to store the minimal possible state.
Selectors are efficient. A selector is not recomputed unless one of its arguments change.
Selectors are composable. They can be used as input to other selectors.
Our state structure
state {
data {
products: Array<Object>
places: Array<Object>
}
}
Our selectors
export const getState = (state) => state
export const getData = (state) => getState(state).data
export const getProducts = (state) => getData(state).products
export const getPlaces = (state) => getData(state).places
Compos selector
export const getProductsWithPlaces = createSelector(
[ getProducts, getPlaces ],
(products, places) => {
return mergeProducts(products, places);
}
)
Full transcript