Workshop 22: React-Redux Middleware
5 likes2,403 views
The document discusses advanced Redux concepts including higher order components, middleware, and the decorator pattern. It provides examples of how middleware can be used to log actions, modify actions before they reach the reducer, and compose independent and reusable behaviors. Code samples are given for middleware structure, a simple logger middleware, and a "superstitious" middleware that modifies actions conditionally. Popular middleware libraries like redux-promise, redux-thunk, and Redux-logger are also mentioned.
Ad
More Related Content
What's hot (20)
Viewers also liked (9)
Ad
Similar to Workshop 22: React-Redux Middleware (20)
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=560&fit=bounds)
Ad
More from Visual Engineering (20)
Recently uploaded (20)
![Get & Download Wondershare Filmora Crack Latest [2025]](https://cdn.slidesharecdn.com/ss_thumbnails/revolutionizingresidentialwi-fi-250422112639-60fb726f-250429170801-59e1b240-thumbnail.jpg?width=560&fit=bounds)
Workshop 22: React-Redux Middleware
- 1. Front End Workshops Redux Advanced Enrique Oriol [email protected] Alex Adrià [email protected]
- 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
- 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.
- 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
- 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?