{"id":31,"date":"2024-12-15T22:45:31","date_gmt":"2024-12-15T22:45:31","guid":{"rendered":"https:\/\/fullstacknotes.netblocs.com\/?p=31"},"modified":"2024-12-18T09:44:13","modified_gmt":"2024-12-18T09:44:13","slug":"what-if-you-use-react-and-redux-with-cdn","status":"publish","type":"post","link":"https:\/\/netblocs.com\/fullstacknotes\/what-if-you-use-react-and-redux-with-cdn\/","title":{"rendered":"What if You Use React and Redux with CDN?"},"content":{"rendered":"
\n
\"\"<\/figure><\/div>\n\n\n

React and Redux Usage<\/strong><\/h3>\n\n\n\n

Using React and Redux can sometimes be confusing, especially when it comes to understanding the flow of applications divided into components.<\/p>\n\n\n\n

But what if we create examples of React and Redux using plain HTML and JavaScript with a CDN? Would that make the structure easier to understand?<\/p>\n\n\n\n

In this post, I\u2019m sharing a single-page example written in plain HTML that might give you a different perspective. However, keep in mind that since there\u2019s no backend integration, the button\u2019s state will not update when clicked. Still, I hope you find it interesting!<\/p>\n\n\n\n

\n\n\n\n

React and Redux with CDN<\/strong><\/h3>\n\n\n\n

The following code snippet demonstrates how to use React and Redux with CDN. It showcases a simple “light status” management application using Redux Saga to handle asynchronous actions and a Redux Store to manage state.<\/p>\n\n\n\n

CDN Links for Required Libraries<\/strong><\/h4>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>script<\/span> <\/span>src<\/span>=<\/span>"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/17.0.2\/umd\/react.production.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<<\/span>script<\/span> <\/span>src<\/span>=<\/span>"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react-dom\/17.0.2\/umd\/react-dom.production.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<<\/span>script<\/span> <\/span>src<\/span>=<\/span>"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/redux\/4.1.1\/redux.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<<\/span>script<\/span> <\/span>src<\/span>=<\/span>"https:\/\/unpkg.com\/redux-saga\/dist\/redux-saga.umd.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<<\/span>script<\/span> <\/span>src<\/span>=<\/span>"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react-redux\/7.2.4\/react-redux.min.js"<\/span>><\/<\/span>script<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
HTML Structure<\/strong><\/h4>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>div<\/span> <\/span>id<\/span>=<\/span>"root"<\/span>><\/<\/span>div<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Redux: Actions, Reducer, and Saga<\/strong><\/h4>\n\n\n\n
Here\u2019s how we define the fundamental Redux components:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/<\/span> Redux Actions<\/span><\/span>\nconst<\/span> <\/span>TOGGLE_LIGHT_REQUEST<\/span> <\/span>=<\/span> <\/span>'TOGGLE_LIGHT_REQUEST'<\/span>;<\/span><\/span>\nconst<\/span> <\/span>TOGGLE_LIGHT_SUCCESS<\/span> <\/span>=<\/span> <\/span>'TOGGLE_LIGHT_SUCCESS'<\/span>;<\/span><\/span>\nconst<\/span> <\/span>TOGGLE_LIGHT_FAILURE<\/span> <\/span>=<\/span> <\/span>'TOGGLE_LIGHT_FAILURE'<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>toggleLightRequest<\/span> <\/span>=<\/span> <\/span>(<\/span>status<\/span>)<\/span> <\/span>=><\/span> (<\/span>{<\/span> type<\/span>:<\/span> <\/span>TOGGLE_LIGHT_REQUEST<\/span>,<\/span> payload<\/span>:<\/span> <\/span>status<\/span> <\/span>}<\/span>)<\/span>;<\/span><\/span>\nconst<\/span> <\/span>toggleLightSuccess<\/span> <\/span>=<\/span> <\/span>(<\/span>status<\/span>)<\/span> <\/span>=><\/span> (<\/span>{<\/span> type<\/span>:<\/span> <\/span>TOGGLE_LIGHT_SUCCESS<\/span>,<\/span> payload<\/span>:<\/span> <\/span>status<\/span> <\/span>}<\/span>)<\/span>;<\/span><\/span>\nconst<\/span> <\/span>toggleLightFailure<\/span> <\/span>=<\/span> <\/span>()<\/span> <\/span>=><\/span> (<\/span>{<\/span> type<\/span>:<\/span> <\/span>TOGGLE_LIGHT_FAILURE<\/span> <\/span>}<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n\/\/<\/span> Redux Reducer<\/span><\/span>\nconst<\/span> <\/span>initialState<\/span> <\/span>=<\/span> <\/span>{<\/span> lightStatus<\/span>:<\/span> <\/span>false<\/span>,<\/span> loading<\/span>:<\/span> <\/span>false<\/span>,<\/span> error<\/span>:<\/span> <\/span>null<\/span> <\/span>};<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>lightReducer<\/span>(<\/span>state<\/span> <\/span>=<\/span> <\/span>initialState<\/span>,<\/span> <\/span>action<\/span>)<\/span> <\/span>{<\/span><\/span>\n    <\/span>switch<\/span> (<\/span>action<\/span>.<\/span>type<\/span>) <\/span>{<\/span><\/span>\n        <\/span>case<\/span> <\/span>TOGGLE_LIGHT_REQUEST<\/span>:<\/span><\/span>\n            <\/span>return<\/span> <\/span>{<\/span> <\/span>...<\/span>state<\/span>,<\/span> loading<\/span>:<\/span> <\/span>true<\/span> <\/span>};<\/span><\/span>\n        <\/span>case<\/span> <\/span>TOGGLE_LIGHT_SUCCESS<\/span>:<\/span><\/span>\n            <\/span>return<\/span> <\/span>{<\/span> <\/span>...<\/span>state<\/span>,<\/span> lightStatus<\/span>:<\/span> <\/span>action<\/span>.<\/span>payload<\/span>,<\/span> loading<\/span>:<\/span> <\/span>false<\/span> <\/span>};<\/span><\/span>\n        <\/span>case<\/span> <\/span>TOGGLE_LIGHT_FAILURE<\/span>:<\/span><\/span>\n            <\/span>return<\/span> <\/span>{<\/span> <\/span>...<\/span>state<\/span>,<\/span> loading<\/span>:<\/span> <\/span>false<\/span>,<\/span> error<\/span>:<\/span> <\/span>'The light status could not be updated.'<\/span> <\/span>};<\/span><\/span>\n        <\/span>default<\/span>:<\/span><\/span>\n            <\/span>return<\/span> <\/span>state<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n\/\/<\/span> Redux Saga<\/span><\/span>\nfunction*<\/span> <\/span>toggleLightSaga<\/span>(<\/span>action<\/span>)<\/span> <\/span>{<\/span><\/span>\n    <\/span>try<\/span> <\/span>{<\/span><\/span>\n        <\/span>const<\/span> <\/span>response<\/span> <\/span>=<\/span> <\/span>yield<\/span> <\/span>call<\/span>(<\/span>fetch<\/span>,<\/span> <\/span>'\/api\/toggle-light'<\/span>,<\/span> <\/span>{<\/span><\/span>\n            method<\/span>:<\/span> <\/span>'POST'<\/span>,<\/span><\/span>\n            headers<\/span>:<\/span> <\/span>{<\/span> <\/span>'Content-Type'<\/span>:<\/span> <\/span>'application\/json'<\/span> <\/span>},<\/span><\/span>\n            body<\/span>:<\/span> <\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span> status<\/span>:<\/span> <\/span>action<\/span>.<\/span>payload<\/span> <\/span>}<\/span>)<\/span>,<\/span><\/span>\n        <\/span>}<\/span>)<\/span>;<\/span><\/span>\n        <\/span>const<\/span> <\/span>data<\/span> <\/span>=<\/span> <\/span>yield<\/span> <\/span>response<\/span>.<\/span>json<\/span>()<\/span>;<\/span><\/span>\n<\/span>\n        <\/span>if<\/span> (<\/span>data<\/span>.<\/span>success<\/span>) <\/span>{<\/span><\/span>\n            <\/span>yield<\/span> <\/span>put<\/span>(<\/span>toggleLightSuccess<\/span>(<\/span>action<\/span>.<\/span>payload<\/span>))<\/span>;<\/span><\/span>\n        <\/span>}<\/span> <\/span>else<\/span> <\/span>{<\/span><\/span>\n            <\/span>yield<\/span> <\/span>put<\/span>(<\/span>toggleLightFailure<\/span>())<\/span>;<\/span><\/span>\n        <\/span>}<\/span><\/span>\n    <\/span>}<\/span> <\/span>catch<\/span> (<\/span>error<\/span>) <\/span>{<\/span><\/span>\n        <\/span>yield<\/span> <\/span>put<\/span>(<\/span>toggleLightFailure<\/span>())<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nfunction*<\/span> <\/span>rootSaga<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>yield<\/span> <\/span>takeLatest<\/span>(<\/span>TOGGLE_LIGHT_REQUEST<\/span>,<\/span> <\/span>toggleLightSaga<\/span>)<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Redux Store and Saga Middleware<\/strong><\/h4>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> <\/span>{<\/span> <\/span>createStore<\/span>,<\/span> <\/span>applyMiddleware<\/span> <\/span>}<\/span> <\/span>=<\/span> <\/span>Redux<\/span>;<\/span><\/span>\nconst<\/span> <\/span>ReduxSaga<\/span> <\/span>=<\/span> <\/span>window<\/span>.<\/span>ReduxSaga<\/span>;<\/span><\/span>\nconst<\/span> <\/span>sagaMiddleware<\/span> <\/span>=<\/span> <\/span>ReduxSaga<\/span>.<\/span>default<\/span>()<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>store<\/span> <\/span>=<\/span> <\/span>createStore<\/span>(<\/span>lightReducer<\/span>,<\/span> <\/span>applyMiddleware<\/span>(<\/span>sagaMiddleware<\/span>))<\/span>;<\/span><\/span>\nsagaMiddleware<\/span>.<\/span>run<\/span>(<\/span>rootSaga<\/span>)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
React Application<\/strong><\/h4>\n\n\n\n
Here\u2019s the React component implementation:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> <\/span>{<\/span> <\/span>useDispatch<\/span>,<\/span> <\/span>useSelector<\/span>,<\/span> <\/span>Provider<\/span> <\/span>}<\/span> <\/span>=<\/span> <\/span>ReactRedux<\/span>;<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>App<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>const<\/span> <\/span>dispatch<\/span> <\/span>=<\/span> <\/span>useDispatch<\/span>()<\/span>;<\/span><\/span>\n    <\/span>const<\/span> <\/span>lightStatus<\/span> <\/span>=<\/span> <\/span>useSelector<\/span>(<\/span>(<\/span>state<\/span>)<\/span> <\/span>=><\/span> <\/span>state<\/span>.<\/span>lightStatus<\/span>)<\/span>;<\/span><\/span>\n    <\/span>const<\/span> <\/span>loading<\/span> <\/span>=<\/span> <\/span>useSelector<\/span>(<\/span>(<\/span>state<\/span>)<\/span> <\/span>=><\/span> <\/span>state<\/span>.<\/span>loading<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n    <\/span>const<\/span> <\/span>handleToggle<\/span> <\/span>=<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n        <\/span>dispatch<\/span>(<\/span>toggleLightRequest<\/span>(<\/span>!<\/span>lightStatus<\/span>))<\/span>;<\/span><\/span>\n    <\/span>};<\/span><\/span>\n<\/span>\n    <\/span>return<\/span> <\/span>React<\/span>.<\/span>createElement<\/span>(<\/span>'div'<\/span>,<\/span> <\/span>null<\/span>,<\/span><\/span>\n        <\/span>React<\/span>.<\/span>createElement<\/span>(<\/span>'h1'<\/span>,<\/span> <\/span>null<\/span>,<\/span> <\/span>`Light Status: <\/span>${<\/span>lightStatus<\/span> <\/span>?<\/span> <\/span>'On'<\/span> <\/span>:<\/span> <\/span>'Off'<\/span>}<\/span>`<\/span>)<\/span>,<\/span><\/span>\n        <\/span>React<\/span>.<\/span>createElement<\/span>(<\/span>'button'<\/span>,<\/span> <\/span>{<\/span> onClick<\/span>:<\/span> <\/span>handleToggle<\/span>,<\/span> disabled<\/span>:<\/span> <\/span>loading<\/span> <\/span>},<\/span><\/span>\n            <\/span>loading<\/span> <\/span>?<\/span> <\/span>'Updating...'<\/span> <\/span>:<\/span> <\/span>'Change Status'<\/span><\/span>\n        )<\/span><\/span>\n    )<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nReactDOM<\/span>.<\/span>render<\/span>(<\/span><\/span>\n    <\/span>React<\/span>.<\/span>createElement<\/span>(<\/span>Provider<\/span>,<\/span> <\/span>{<\/span> store<\/span>:<\/span> <\/span>store<\/span> <\/span>},<\/span> <\/span>React<\/span>.<\/span>createElement<\/span>(<\/span>App<\/span>))<\/span>,<\/span><\/span>\n    <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'root'<\/span>)<\/span><\/span>\n)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\n\n\n\n
Conclusion<\/strong><\/h3>\n\n\n\n
This example aims to simplify the fundamental structure of React and Redux and make it easier to understand. If you\u2019d like to explore this concept further, you can expand the example by integrating a backend service for handling the state updates.<\/p>\n\n\n\n
\n\n\n\n
Feel free to share your thoughts and suggestions in the comments below!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
React and Redux Usage Using React and Redux can sometimes be confusing, especially when it comes to understanding the flow of applications divided into components. But what if we create…<\/p>\n","protected":false},"author":1,"featured_media":33,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,11,21],"tags":[23,14,19,22],"class_list":["post-31","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-libraries","category-react","category-react-libraries","tag-cdn","tag-react","tag-react-libraries","tag-redux"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":3,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts\/31\/revisions"}],"predecessor-version":[{"id":95,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts\/31\/revisions\/95"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/media\/33"}],"wp:attachment":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/media?parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/categories?post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/tags?post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}