Overview of Redux Thunk middleware usage. Reducing boilerplate via custom libraries to avoid repetition and increase developer's experience. Presentation given in React Poznań Meetup 28.09.2017

1. Redux Thunk-Fu
Fighting with Async
嗨
Artur Szott @ HolidayCheck
&

2. Action
An object with type
一

3. Action creator
Function that returns action
二

4. Thunk?
Let’s see.
三

5. Store
dispatcher Action

6. Store
dispatcher
Actions

7. Store
dispatcher
Thunk Action

8. Thunk
Function that returns function
三
(And does stuff!)

9. const action = {
type: 'HOLIDAYCHECK_POZNAN',
recruiting: true
};
dispatch(action)

10. function checkHolidayCheck() {
return function (dispatch, getState) {
return fetch('http://bit.ly/hcpoz-fb')
.then((response) => {
dispatch({
type: 'HOLIDAYCHECK_POZNAN',
recruiting: response.recruiting
})
});
}
}
dispatch(checkHolidayCheck())

12. Three pillars of request

13. Attempt
Failure
Success
一
二
三

14. function typicalAction() {
return function (dispatch, getState) {
dispatch({ type: 'ACTION_ATTEMPT' });
// do something and resolve response
if (response.status === 'ok') {
return dispatch({ type: 'ACTION_SUCCESS' });
} else {
return dispatch({ type: 'ACTION_FAILURE' });
}
}
}
dispatch(typicalAction())

15. “ Repetition leads
to excellence. “
- Mr Miyagi
Photo from ilovemyportrait.com

16. “ Repetition may lead
to waste of time. “
- Mr Szott

17. +

18. function firedAction(actionType) {
return {
type: `${actionType}_ATTEMPT`,
error: false
};
}
Attempt 嘗試

19. function receivedData(actionType, payload) {
return {
type: `${actionType}_SUCCESS`,
error: false,
payload
};
}
Success 成功

20. function receivedError(actionType, error) {
return {
type: `${actionType}_FAILURE`,
error: true,
payload: error
};
}
Failure 失敗

21. const dispatchPromiseResult = (dispatch, { actionType, promise }) => {
dispatch(firedAction(actionType));
return Promise.resolve(promise)
.then((data) => dispatch(receivedData(actionType, data)))
.catch((err) => dispatch(receivedError(actionType, err)));
};
Together 统

22. function checkHolidayCheck() {
return function (dispatch, getState) {
return fetch('http://bit.ly/hcpoz-fb')
.then((response) => {
dispatch({
type: 'HOLIDAYCHECK_POZNAN',
recruiting: response.recruiting
})
});
}
}
dispatch(checkHolidayCheck())
Before

23. function checkHolidayCheck() {
return function (dispatch, getState) {
return dispatchPromiseResult(dispatch, {
actionType: 'HOLIDAYCHECK_POZNAN',
promise: fetch('http://bit.ly/hcpoz-fb')
})
}
}
dispatch(checkHolidayCheck())
After

24. Thunk
Comes with extra
结局
(Will talk about next presentation!)

25. function seeYouNextTime() {
return function (dispatch, getState, extraArgumentIsGreat) {
return dispatchPromiseResult(dispatch, {
actionType: 'THIS IS THE END,
promise: fetch('http://bit.ly/hcpoz-fb')
})
}
}
dispatch(seeYouNextTime())
Extra argument

26. Redux Thunk-Fu
Fighting with Async (Part 1)
谢谢
Artur Szott @ HolidayCheck
&