Workshop 22: ReactJS Redux Advanced
2 likes1,409 views
The document outlines advanced concepts in React and Redux, including decomposing UI into reusable components, middleware functionality, and higher order components (HOCs). It discusses the Redux life-cycle, the structure and benefits of middleware, and provides examples for implementing middleware, including a logger middleware. The document also briefly mentions popular middleware options like redux-promise and redux-thunk.
Workshop 22: ReactJS Redux Advanced
- 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?