Download as PDF, PPTX
Uploaded byVisual Engineering
Workshop 22: ReactJS Redux Advanced
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.
More Related Content
Similar to Workshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux Advanced
- 1. Front End Workshops ReduxAdvanced Enrique Oriol eoriol@naradarobotics.com Alex Adrià aadria@visual-engin.com
- 3. Previously in ReactJS... ReactJSBasics 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 EVENTSOURCING PRINCIPIOS SINGLE SOURCE OF TRUTH READ-ONLY STATE CHANGES WITH PURE FUNCTIONS
- 5. Previously in ReactJS... Redux ReactAction Creator Action Reducers State Calls Returns Sent to Creates new Sent to
- 6.
- 7.
- 8. What is aHOC? ● 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.
- 10.
- 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.
- 13. What is middleware Providescapability to put CODE between dispatching an action and reaching the reducer.
- 14. Basic redux life-cycle ReactAction Creator Action Reducers State Calls Returns Sent to Creates new Sent to
- 15. Redux life-cycle withmiddlewares 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.
- 17. Middleware stack example1 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 ● Itis 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){ returnfunction(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 MEan 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 middlewareworkflow 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.
- 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: npminstall --save package
- 28. Thanks for yourtime! Do you have any questions?