This document summarizes a presentation about building modern web parts with React and Redux. It discusses why Microsoft is using React in Office 365 applications and how React combined with Redux helps build single page applications. It provides an overview of React components and state management. It also summarizes the basic principles of Redux, including how data is contained in the application and views are contained separately. The document shares code for an example FAQ web part built with React and Redux and diagrams the overall application structure and data flow.

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