lab07 redux review - github pages · connect redux store to react •useconnectfunction...
TRANSCRIPT
![Page 1: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/1.jpg)
Lab07Redux Review
WebAppDataLab, CS, NTHU
2019 Spring
![Page 2: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/2.jpg)
Why Redux?
• Separation of concerns
• Unidirectional (top-down) data flow in React
• States easy to inspect
• State changes reversible; easy to debug
![Page 3: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/3.jpg)
Redux Workflow
![Page 4: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/4.jpg)
From React To Redux
Today.jsx(lab-react-weathermood-post)
Today.jsx(redux-weathermood-post)
![Page 5: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/5.jpg)
UI
• Use props rather then state
Today.jsx(lab-react-weathermood-post)
Today.jsx(redux-weathermood-post)
![Page 6: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/6.jpg)
UI
• Dispatch actions
Today.jsx(lab-react-weathermood-post)
Today.jsx(redux-weathermood-post)
![Page 7: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/7.jpg)
Action
• You can dispatch multiple (asynchronous) actions in one action
weather-action.js
![Page 8: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/8.jpg)
Action
• You can dispatch multiple (asynchronous) actions in one action
weather-action.js
![Page 9: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/9.jpg)
Action
• In a simple action, return the type of action and parameters (which will be sent to reducer later)
weather-action.js
![Page 10: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/10.jpg)
Reducer
• In a reducer, return the new state for redux store
weather-reducers.js
![Page 11: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/11.jpg)
Reducer – Correct way to update state
• Wrong:• Modifying your state directly
• Correct:• Making copies of your data, and applying your changes to the copies• Use spread operator, or functions like Object.assign()
![Page 12: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/12.jpg)
Connect Redux store to React
• Use connect function
• Pass a function to connect• Input: The state of redux store• Output: The props of the react component
Today.jsx
![Page 13: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/13.jpg)
Back To UI
• Use the props of the react component to render
Today.jsx
![Page 14: Lab07 Redux Review - GitHub Pages · Connect Redux store to React •Useconnectfunction •Passafunction to connect •Input:Thestateofreduxstore •Output: The props of the react](https://reader030.vdocuments.net/reader030/viewer/2022041016/5ec836b56057c1295e335266/html5/thumbnails/14.jpg)
Assignment
(5%)