Workshop React - Redux: Middleware / Higher Order Components Presentado por ingenieros Enrique Oriol y Alex Adrià

1. Front End Workshops
Redux Advanced
Enrique Oriol
eoriol@naradarobotics.com
Alex Adrià
aadria@visual-engin.com

3. Previously in ReactJS...
ReactJS Basics
1. Decompose UI into reusable components which
render to virtual DOM
2. ReactJS will sync VDOM to real browser DOM
3. JSX format
4. Can render on client and server

4. Previously in ReactJS...
Redux
PATTERNS
FLUX
CQRS
EVENT SOURCING
PRINCIPIOS
SINGLE SOURCE OF TRUTH
READ-ONLY STATE
CHANGES WITH PURE
FUNCTIONS

5. Previously in ReactJS...
Redux
React Action Creator
Action
Reducers
State
Calls Returns
Sent to
Creates new
Sent to

6. Previously in ReactJS...
React-router
React
History
React router

7. Higher Order Components
(HOC)

8. What is a HOC?
● It is a JavaScript function which is used for adding
additional functionality to existing component
● A takes an existing component and returns another
component that wraps it.
● If the HOC data changes, It will re-run again and update
the resulting component.
● It usually contains reusable common behaviours
resulting in simpler and better structured components.
● A component can be wrapped several times by multiple
wrappers.

9. Decorator Pattern

10. Decorator Pattern

11. export default function(ComposedComponent) {
class HOCExample extends Component {
componentDidMount() {
this.setState({data:'Data from HOC...'});
}
render() {
return <ComposedComponent {...this.props} {...this.state} />;
}
}
return HOCExample;
}
HOC structure example

12. Redux Middleware

13. What is middleware
Provides capability to
put CODE
between
dispatching an action
and
reaching the reducer.

14. Basic redux life-cycle
React Action Creator
Action
Reducers
State
Calls Returns
Sent to
Creates new
Sent to

15. Redux life-cycle with middlewares
Middleware
React Action Creator
Action
Reducers
State
Calls Returns
Sent to
Forwards
action to
Creates new
Sent to Middleware receives
the action
and can log
stop and modify it

16. Middleware benefits
COMPOSABLE
INDEPENDENT

17. Middleware stack example 1
Middleware # 1
I don’t care about this action, I’ll send it
to the NEXT middleware
Action Creator Action
Reducers
next
Middleware # 2
I will log this action, and move it
forward
Middleware # 3
I don’t care about this action, I’ll send it
to the NEXT middleware
next
console.log()

18. Middleware structure
● It is a function that receives the store
● It MUST return a function with arg “next”
● That returns a function with arg “action”
○ Where we do our stuff
○ And return
■ next(action)
■ state.dispatch(action)

19. export default function(store){
return function(next){
return function(action){
//do something
//use next(action) or
//state.dispatch(action)
}
}
}
Middleware structure
ES 5 middleware declaration

20. export default store => next => action => {
//do something
//next(action); or state.dispatch(action);
}
}
Middleware structure ES6
export default ({dispatch}) => next => action => {
//our stuff
}
}
src/middleware/myMiddleware.js
In case we don’t need the store

21. Middleware
C’MON MAN!
GIVE ME an EXAMPLE!!

22. Simplest example - logger
Middleware
REACT IncreaseCounter() INC_ACTION
ReducersSTATE
- counter
Forwards
action to
Component
counter
+
- DecreaseCounter()
DEC_ACTION
Update
state
counter
logger

23. Using our middleware
import {createStore, applyMiddleware } from 'redux';
import reducers from './reducers';
import MyMid from './middlewares/my-middleware';
const createStoreWithMiddleware = applyMiddleware(myMid)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<App />
</Provider>
, document.querySelector('.container'));
src/index.js

24. Modify action middleware workflow
Middleware that modifies specific
action
Is it the action that I want?
Action Creator Action
no yes
Send action
forwards
Next middleware
Do some
stuff
Create new action
with the results Action
Middleware
stack
next(action)
store.dispatch(newAction)

25. Middleware
CAN YOU
SHOW ME
SOME CODE?

26. Dispatch action example - superstitious counter
Middleware
REACT IncreaseCounter() INC_ACTION
ReducersSTATE
- counter
Forwards
action to
Component
counter
+
- DecreaseCounter()
DEC_ACTION
Update
state
counter
logger
superstitious

27. Popular middlewares
redux-promise
redux-thunk
Redux-logger
Remember: npm install --save package

28. Thanks for your time!
Do you have any questions?