An opinionated Development Lifecycle for Force.com development
React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated...
Transcript of React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated...
![Page 1: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/1.jpg)
React + ReduxManaging Your React App State with Redux
Keith Orlando
![Page 2: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/2.jpg)
Agenda
1. What is Redux?2. Why Redux?3. Vocabulary4. Principles5. The Redux lifecycle6. Workshop: catbook integration7. Good practices8. Resources9. Homework
![Page 3: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/3.jpg)
What is Redux?
![Page 4: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/4.jpg)
Redux is a predictable state container for JavaScript apps.
![Page 5: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/5.jpg)
Why Redux?
![Page 6: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/6.jpg)
App
Feed
Card
Navbar
SingleStory CommentsBlock
NewStory
SingleComment NewComment
GET /api/whoami
“Lift up state” to App.jsand pass it down as props
this.props.userId
this.props.userId
this.props.userId
this.props.userId
![Page 7: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/7.jpg)
App
Feed
Card
Navbar
SingleStory CommentsBlock
NewStory
SingleComment NewComment
“Lift up state” to the Redux Store
this.p
rops.u
serId
this.props.userId
this.p
rops.u
serId
ReduxStore
![Page 8: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/8.jpg)
Redux Vocabulary
• Store: the global app state• Actions: objects that describe “what happened”• Reducers: functions that return the next state based on an action• Dispatching: triggering a state update by sending an action
![Page 9: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/9.jpg)
Redux Principles
![Page 10: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/10.jpg)
1) Your app state (Redux store) is the single source of truth.
![Page 11: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/11.jpg)
2) Like in React, the state is read-only. Never mutate your state directly.
![Page 12: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/12.jpg)
3) State changes are made with pure functions(no side effects).
E.g. Don’t make an API call inside of a reducer.
![Page 13: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/13.jpg)
Component (View)
Store
Action Creator
Reducer
Create an action
Dispatch the action
Create a new state
ReduxLifecycle
= Redux concept = React concept
Subscribe to the store(you choose what data is
available as props)
![Page 14: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/14.jpg)
Actions (objects)
{
type: string,
...,}
REQUIRED
additional data
describe what happened
![Page 15: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/15.jpg)
Reducers (pure functions)
function(state, action) {switch (action.type) {
case UPDATE_USER_ID:return Object.assign({}, state, {
userId: action.userId,});
...}
}
return the next state
current part of state dispatched action (an object)
![Page 16: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/16.jpg)
{
user: {userId: string,user: object,
},
story: {stories: [object],
},}
CatbookRedux Store
![Page 17: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/17.jpg)
Workshop: Integrating Redux into Catbook
If you plan on following along:
1. Control + C (quit) any currently running instances of catbook/react hot loader2. Open a terminal window/tab and type:
$ cd ~ (or wherever you want to clone the project)$ git clone https://github.com/korlando/catbook-redux$ cd catbook-redux$ npm install$ npm start$ (open the project in another terminal) npm run hotloader
3. Visit http://localhost:5000 in your browser
![Page 18: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/18.jpg)
Redux Good Practices(when not to use Redux?)
• Rule of thumb: put data in the Redux store when it’s shared between two or more components.• E.g. You probably don’t need to put the state of an input textbox in the redux store.
• Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency.• Applies to naming conventions• Applies to making API calls (I prefer making an API call in componentDidMount and then
dispatching an action)
![Page 19: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/19.jpg)
Additional Resources
• Redux Docshttps://redux.js.org
• The redux-workshop branch of my fork$ git reset –hard$ git fetch$ git checkout redux-workshop
• Redux Sagas for advanced asynchronous handlinghttps://redux-saga.js.org
• Redux Sauce for quicker setuphttps://github.com/jkeam/reduxsauce
![Page 20: React + Reduxweblab.mit.edu/public/react-redux.pdf · •Redux and React are not highly opinionated frameworks. Pick a convention and stick to it for consistency. •Applies to naming](https://reader030.fdocuments.in/reader030/viewer/2022040608/5ec57f381feb3d608637058f/html5/thumbnails/20.jpg)
Homework{
user: {userId: string,user: object,
},
story: {stories: [object],
},}
Upgrade the rest of catbook to redux.