Recommended
More Related Content
What's hot
What's hot (20)
Similar to Spfx with react redux
Similar to Spfx with react redux (20)
Recently uploaded
Recently uploaded (20)
Spfx with react redux
- 1. SharePoint Saturday Utah 2018
- 2. SPFX Modern Web parts with React/Redux @rajkhetarpal
- 3. Why React/Redux • Microsoft is using React in O365 applications (Planner, TODO etc. ) • React combine with Redux helps in building Single Page Application • Redux helps in managing application state https://developer.microsoft.com/en-us/fabric#/components https://redux.js.org/
- 4. React is javascript libarary for building user interface Functional Component • Receive Props as an argument • No Internal State • No Life Cycle Methods Class Component Access props via this.props Manage internal state (this.state) Use lifecycle methods
- 5. State is plain JavaScript object this.state = {counter:1} setState({counter:this.counter + 1}) Async setState ((prevState,prevProps)=>{return {counter:prevState.counter + 1} }) Sync
- 6. Immutability • Objects and array are reference type in JavaScript • That mean storing an array in new variable, you don’t create an actual copy • Use Array. Slice Or Spread operator • Object.assign({},oldobject OR {…oldobject}
- 7. Redux – Basic Principle • Redux is your application data • Application state is stored in a single object https://redux.js.org/
- 9. FAQ Webpart – Built with React/Redux https://github.com/rajeshkhetarpal/faq-webpart
- 10. Data • List of FAQs • Selected FAQ • Form Values Views • FAQ List • Redux Form
- 11. Data contained in Application Views contained in application React Redux Application FAQ List FAQ Form FAQ Web part Header FAQs Selected FAQ App Settings FAQ Form Redux is application Data React is view
- 12. Reducer is a function which returns a piece of application state • Appsettingsreducer > AppSettings state • Faqreducer > faqs state • Selectedfaqreducer > selectedfaq state • Formreducer > form state
- 13. Reducer code flow Appsetting Reducer Action Creator Action Trigger
- 14. Container is a React component which has direct connection with state managed by redux • Containers are called smart components • React-redux library helps connecting two separate libraries React and Redux • Connect transform React component into Container component
- 15. Action Creator is a function which returns an action
- 16. User action triggers action creator in redux application Action Creator Action creator returns an action object Middleware All actions go thru redux middleware and then sent to reducer Reducer Reducer process the action and returns the new state. and Reducer notify the containers of change state Containers then renders the component with new state Action Creator flow in redux Application
- 17. Action creator code flow User clicks to select FAQ Action creator returns an action object Reducer takes the previous state and action and return new state Container component gets the selected FAQ as property
- 18. Provider Connect Component Redux Store Connect Component Provider wraps redux store which is global application state formed by all reducer
- 19. Code – Application Structure https://github.com/rajeshkhetarpal/faq-webpart
- 20. Q&A
- 21. Thanks for joining us
- 22. Thank our Sponsors Platinum Gold Silver Web ShareSki SharePint
- 23. SharePint Bout Time Pub and Grub 6:00 PM – 7:30 PM Drinks and light food provided 3318 Decker Lake Dr, West Valley City, UT 84119 Next to the Maverick Center