This document provides an overview of Redux and related tools for managing state in web applications. It introduces Redux and how it uses a single state tree with actions and reducers to update state immutably. It covers using React with Redux through connect and presentational/container components. It then summarizes approaches for handling side effects like API calls using middleware like redux-thunk and redux-saga. Finally, it recommends structuring Redux apps using feature folders and separating concerns with dumb and smart components.

2. You can find link to animated version
on last page

3. ABOUT USABOUT US
- finds leads from social media in
real-time
LeadScanr
Front-End, MLFull stack
Ievgen TerpilVyacheslav Pytel
@JenyaTerpil@vyacheslav_de

4. CHAPTER 0CHAPTER 0
INTROINTRO

5. INITIAL POINTINITIAL POINT
- Framework without improvements
- File structure
- Scalability
- Build tools

6. IDEAL APPIDEAL APP
- framework with community
- easy to implement new features
- easy to support
- easy to test
- localization
- build tools

7. CHAPTER 1CHAPTER 1
HYPEHYPE

8. FLUXFLUX

9. REDUXREDUX
@dan_abramov React Europe

10. REDUXREDUX
(state, action) => state

11. REDUXREDUX

12. REDUXREDUX
{
type: 'DEPOSIT',
value: 10
}
ACTIONACTION

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

14. REDUXREDUX
STATESTATE
state tree
Single source of truth

15. REDUXREDUX
const store =
createStore(reducer, initialState)
store.subscribe(render)
// -----------------------------------
store.dispatch(action)
STORESTORE
State is read-only

16. REDUXREDUX
const App = ({ state }) => {
<div>
Balance: {state}
</div>
}
VIEWVIEW

17. VIEW LAYERVIEW LAYER
redux
react-redux ng-redux ........

18. REACT AS VIEW LAYERREACT AS VIEW LAYER

19. REACT AS VIEW LAYERREACT AS VIEW LAYER
Account = ({ balance, onDepositClick }) => {
<div>
<button onClick={onDepositClick}>
deposit
</button>
<div>Balance: {balance}</div>
</div>
}

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

24. SIDE EFFECTSSIDE EFFECTS

25. SIDE EFFECTSSIDE EFFECTS

26. SIDE EFFECTS - BASE APPROACHSIDE EFFECTS - BASE APPROACH
{ type: 'FETCH_ACCOUNT_REQUEST' }
{ type: 'FETCH_ACCOUNT_SUCCESS', account: { ... } }
{ type: 'FETCH_ACCOUNT_FAILURE', error: 'Oops' }
function receiveAccount(account) {
return {
type: FETCH_ACCOUNT_SUCCESS,
account
}
}
actions
action creators

27. SIDE EFFECTS - BASE APPROACHSIDE EFFECTS - BASE APPROACH
redux-thunk
let getAccount = id => dispatch => {
dispatch(requestAccount(id));
return fetch('/account', id)
.then(account => dispatch(receiveAccount(account)))
.catch(error => dispatch(throwError(error)));
};
complex action creator
API request

28. redux-api-middleware
import { CALL_API } from `redux-api-middleware`;
{
[CALL_API]: {
endpoint: 'api/account',
method: 'GET',
types: ['REQUEST', 'SUCCESS', 'FAILURE']
}
}
action creators
SIDE EFFECTS -SIDE EFFECTS - LESS BOILERPLATELESS BOILERPLATE
declarative

29. SIDE EFFECTS -SIDE EFFECTS - LESS BOILERPLATELESS BOILERPLATE

30. CHAPTER 2CHAPTER 2
PRODUCTIONPRODUCTION

31. FEATURE FOLDERSFEATURE FOLDERS

32. FEATURE FOLDERSFEATURE FOLDERS
view actions reducers
i
i
i
feature1
feature2
feature3

33. FEATURE FOLDERSFEATURE FOLDERS
view actions reducers
i
i
i
feature1
feature2
feature3
set of standart components

34. FEATURE FOLDERSFEATURE FOLDERS
view actions reducers
i
i
i
feature1
feature2
feature3
set of standart components
main reducer

35. FEATURE FOLDERSFEATURE FOLDERS
view actions reducers
i
i
i
feature1
feature2
feature3
set of standart components
main reducer
all actions

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

38. Action Creator
Service 1
Service 2
Service 3
A
A
A
SIDE EFFECTS -SIDE EFFECTS - ADVANCED USAGEADVANCED USAGE

39. Action Creator
Service 1
Service 2
Service 3
A
A
A
SIDE EFFECTS -SIDE EFFECTS - ADVANCED USAGEADVANCED USAGE
Action Creator
Action Creator

40. SIDE EFFECTS -SIDE EFFECTS - ADVANCED USAGEADVANCED USAGE
applyMiddlewares(middleware1, middleware2, ...)

41. redux-chain-middleware
dispatch([
startProcessCard(),
setCreditCard(card),
getOffers(),
buy(plan.get('id')),
pushState(null, '/account', {})
]);
async waterfall
SIDE EFFECTS -SIDE EFFECTS - ADVANCED USAGEADVANCED USAGE

42. CHAPTER 3CHAPTER 3
SAGASAGA

43. SAGASAGA
orchestrating complex/asynchronous operations
Saga
Service 1
Service 2
Service 3

44. REDUX-SAGAREDUX-SAGA
Generator functions (ES6) as action creators1
function* fetchAccount() {
const account = yield Api.fetch('/account')
console.log(account)
}
function* watchFetchAccount() {
yield* takeEvery('ACCOUNT_REQUESTED', fetchAccount)
}

45. REDUX-SAGAREDUX-SAGA
Declarative Effects
{
CALL: {
fn: Api.fetch,
args: ['./account']
}
}
2
yield only a description of
the function invocation
import { call } from 'redux-saga/effects'
function* fetchAccount() {
const account = yield call(Api.fetch, '/account')
// ...
}
- making our code testable

46. import { call, put } from 'redux-saga/effects'
function* fetchAccount() {
const account = yield call(Api.fetch, '/account')
yield put({ type: 'ACCOUNT_RECEIVED', products })
}
REDUX-SAGAREDUX-SAGA
Dispatching actions
import { call } from 'redux-saga/effects'
function* fetchAccount(dispatch) {
const account = yield call(Api.fetch, '/account')
dispatch({ type: 'ACCOUNT_RECEIVED', account })
}

47. assert.deepEqual(
iterator.next().value,
call(Api.fetch, '/account')
)
REDUX-SAGAREDUX-SAGA
Testing
const iterator = fetchAccount()
// create a fake response
const account = { balance: 10 }
// expects a dispatch instruction
assert.deepEqual(
iterator.next(account).value,
put({ type: 'ACCOUNT_RECEIVED', account })
)}

48. REDUX-SAGA APIREDUX-SAGA API
takeEvery
takeLatest
Saga
take put
call
A
Api
Dispatcher
fork
Saga
cancel

49. CONCLUSIONCONCLUSION
flux redux
redux: (state, action) => state

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