Más contenido relacionado
La actualidad más candente (19)
Similar a React. Redux. Real world. (20)
React. Redux. Real world.
- 17. Redux
const reducer = (oldState = `FOO`, action) => {
switch(action.type) {
case `UPDATE_FOO`:
return `BAR`
}
return oldState
}
const store = createStore(reducer)
17
// подписаться на обновления
store.subscribe(() => {
assert.ok(store.getState() === `BAR`)
})
// передать изменения
store.dispatch({
type: `UPDATE_FOO`
})
// получить текущее состояние
assert.ok(store.getState() === `FOO`)
- 18. Tests
const reducer = (oldState, action) => {
switch(action.type) {
case `ACTION_TYPE`:
return action.payload
}
}
assert.ok(reducer(``, `BAR`) === `BAR`)
18
- 19. React + Redux
<Provider store={store}>
<ButtonContainer />
</Provider>
const Button = ({handleClick, title}) => (
<button onClick={handleClick}>{title}</button>
)
19
const mapStateToProps = state => ({
title: state.title
})
const mapDispatchToProps = dispatch => ({
handleClick: () => dispatch({
type: `CLICK`
})
})
const ButtonContainer = connect(mapStateToProps, mapDispatchToProps)(Button)
- 21. spread...
const initialState = {
foo: `foo`,
bar: `bar`
}
const reducer = (state = initialState, action) => {
switch(action.type) {
case `UPDATE_BAR`:
return {
...state,
bar: `baz`
}
}
}
return {
...state,
we: {
...state.we,
must: {
...state.we.must,
go: {
...state.we.must.go,
deeper: action.payload
}
}
}
}
21
- 23. Immutable.js
const mapStateToProps = state => ({
foo: state.get(`foo`),
bar: state.get(`bar`),
...
})
import { Map } from 'immutable'
const map = Map({
foo: `bar`
})
const { foo } = map
assert.fails(foo === `bar`)
assert.ok(foo === undefined)
23
- 24. Seamless-immutable
import Immutable from 'seamless-immutable'
const map = Immutable({foo: `bar`})
const { foo } = map
assert.ok(foo === `bar`)
24
Object.freeze()
~5 KB
return state.setIn([`we`, `must`, `go`, `deeper`], action.payload)
- 30. Мемоизация | Reselect
import { createSelector } from 'reselect'
const clustersSelector = createSelector(
state => state.points,
state => state.map.zoom,
(points, zoom) => calculateClusters(points, zoom)
)
30
- 32. Flux Standard Action
{
type: `DO_SOMETHING`,
payload: {
foo: `bar`
},
meta: {
foo: `bar`
}
}
32
{
type: `DO_SOMETHING`,
payload: new Error(),
error: true
}
- 35. thunk
const asyncAction = () => dispatch => {
dispatch({
type: `REQUEST`
})
fetch()
.then(() => dispatch({type: `REQUEST_SUCCESS`}))
.catch(() => dispatch({type: `REQUEST_ERROR`}))
}
35
- 36. thunk??
export const finallySend = () => (dispatch, getState) => {
const {phone, location, latlng, description, uploadId} = getState().toJS()
dispatch({
type: SEND_REQUEST
})
if (isEmpty(latlng)) {
if (!location) {
dispatch(sendResults({phone, location, description, uploadId}))
return dispatch(setStep(`done`))
}
geocodeLocation(location).then(payload => {
const {lat: photoLat, lng: photoLon} = payload
dispatch(sendResults({phone, location, description, uploadId, photoLat, photoLon}))
})
} else {
const {lat: photoLat, lng: photoLon} = latlng
dispatch(sendResults({phone, location, description, uploadId, photoLat, photoLon}))
}
dispatch(setStep(`done`))
}
36
tests?
scale?
- 39. Тесты
const generator = request()
expect(generator.next().value).toEqual(put({type: `REQUEST`))
expect(generator.next().value).toEqual(call(api.requestData))
expect(generator.next(dummyResponse).value).toEqual(put({type: `REQUEST_SUCCESS`, payload}))
39
- 50. redux-elm
//parentUpdater
import { Updater } from 'redux-elm';
import childUpdater, { init as childInit } from './childUpdater'
export const init = () => Immutable({
child1: childInit(),
child2: childInit()
});
export default new Updater(init(), saga)
.case(`Child1`, (model, action) => childUpdater(model.child1, action))
.case(`Child2`, (model, action) => childUpdater(model.child2, action))
.toReducer();
50
- 51. redux-elm
//Parent
import { forwardTo, view } from 'redux-elm'
import ChildView from 'redux-elm'
export default view(({ model, dispatch }) => (
<div>
<ChildView model={model} dispatch={forwardTo(dispatch, `Child1`)} />
<ChildView model={model} dispatch={forwardTo(dispatch, `Child2`)} />
</div>
));
51