From 774f483a8d5a4183d3ab06c67207a4966074b419 Mon Sep 17 00:00:00 2001 From: Rauqoz Date: Wed, 17 Aug 2022 21:19:16 -0600 Subject: [PATCH] Squashed: redux with doc --- frontend/package-lock.json | 55 ++++--------------- frontend/package.json | 2 +- frontend/public/index.html | 4 +- frontend/public/manifest.json | 4 +- frontend/src/App.js | 2 +- .../Redux/Actions/Template.actions.js | 12 +--- frontend/src/Middlewares/Redux/README.md | 43 +++++++++++++++ .../Redux/Reducers/Tempate.reducers.js | 2 +- frontend/src/Middlewares/Redux/store.js | 6 +- frontend/src/index.js | 3 + 10 files changed, 70 insertions(+), 63 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4c624f7..f4a8292 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,12 +11,12 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", "@testing-library/user-event": "^13.5.0", - "axios": "^0.27.2", "react": "^18.0.0", "react-dom": "^18.0.0", "react-redux": "^8.0.1", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "redaxios": "^0.5.0", "redux": "^4.2.0", "redux-thunk": "^2.4.1", "styled-components": "^5.3.5", @@ -4488,28 +4488,6 @@ "node": ">=4" } }, - "node_modules/axios": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", - "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", - "dependencies": { - "follow-redirects": "^1.14.9", - "form-data": "^4.0.0" - } - }, - "node_modules/axios/node_modules/form-data": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", - "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", - "dependencies": { - "asynckit": "^0.4.0", - "combined-stream": "^1.0.8", - "mime-types": "^2.1.12" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -13494,6 +13472,11 @@ "node": "*" } }, + "node_modules/redaxios": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/redaxios/-/redaxios-0.5.0.tgz", + "integrity": "sha512-qmEJjQF0igI+H9SDKlQdWz6XskJ5zm2s6KPY0AvtlbQtRNe1OcuJIfxGmySDCpoU18/UtC7zWEFIWpkHMZ1/Ow==" + }, "node_modules/redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", @@ -19349,27 +19332,6 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz", "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==" }, - "axios": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", - "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", - "requires": { - "follow-redirects": "^1.14.9", - "form-data": "^4.0.0" - }, - "dependencies": { - "form-data": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", - "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", - "requires": { - "asynckit": "^0.4.0", - "combined-stream": "^1.0.8", - "mime-types": "^2.1.12" - } - } - } - }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -25744,6 +25706,11 @@ } } }, + "redaxios": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/redaxios/-/redaxios-0.5.0.tgz", + "integrity": "sha512-qmEJjQF0igI+H9SDKlQdWz6XskJ5zm2s6KPY0AvtlbQtRNe1OcuJIfxGmySDCpoU18/UtC7zWEFIWpkHMZ1/Ow==" + }, "redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 486a469..3152a88 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -6,12 +6,12 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", "@testing-library/user-event": "^13.5.0", - "axios": "^0.27.2", "react": "^18.0.0", "react-dom": "^18.0.0", "react-redux": "^8.0.1", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "redaxios": "^0.5.0", "redux": "^4.2.0", "redux-thunk": "^2.4.1", "styled-components": "^5.3.5", diff --git a/frontend/public/index.html b/frontend/public/index.html index b0c51c1..9ebccfa 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -7,7 +7,7 @@ - React Template + Rauqoz Template diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json index 952449d..d419dbd 100644 --- a/frontend/public/manifest.json +++ b/frontend/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "Rauqoz Template", + "name": "Rauqoz Template Full Stack MERN", "icons": [ { "src": "favicon.ico", diff --git a/frontend/src/App.js b/frontend/src/App.js index 550d991..a08f53f 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -2,7 +2,7 @@ import RoutesPath from './Routes/Routes'; /* Check the folder "src/Middlewares/SocketIO/SocketIO" */ -// import './Middlewares/SocketIO/SocketIO'; +// import './Middlewares/SocketIO/socketIO'; function App() { return ; diff --git a/frontend/src/Middlewares/Redux/Actions/Template.actions.js b/frontend/src/Middlewares/Redux/Actions/Template.actions.js index 90b95f7..2176fd7 100644 --- a/frontend/src/Middlewares/Redux/Actions/Template.actions.js +++ b/frontend/src/Middlewares/Redux/Actions/Template.actions.js @@ -1,4 +1,4 @@ -import axios from 'axios'; +import redaxios from 'redaxios'; export const UPDATE_POKEMON = 'UPDATE_POKEMON'; export const UPDATE_DATA_POKEMON = 'UPDATE_DATA_POKEMON'; export const RESET = 'RESET'; @@ -28,16 +28,10 @@ export const reset_ = () => { export const search_pokemon_ = (poke) => { return async (dispatch) => { try { - var config = { - method: 'get', - url: `https://pokeapi.co/api/v2/pokemon/${poke}`, - headers: {} - }; - - const { data } = await axios(config); + const { data } = await redaxios.get(`https://pokeapi.co/api/v2/pokemon/${poke}`); dispatch(update_data_pokemon_(data)); } catch (error) { - dispatch(update_data_pokemon_(`Error on Pokemon ${poke}`)); + dispatch(update_data_pokemon_(`Error on Pokemon ${poke}!`)); } }; }; diff --git a/frontend/src/Middlewares/Redux/README.md b/frontend/src/Middlewares/Redux/README.md index 0c5bb51..511fa6b 100644 --- a/frontend/src/Middlewares/Redux/README.md +++ b/frontend/src/Middlewares/Redux/README.md @@ -2,3 +2,46 @@ ## Installation and Use +Redux is implemented in this template, it is divided as follows: + +>If you want to remove the use of redux, you must remove the following lines of code + +In index.js +```javascript + // Example start --- you can remove from this line + import { Provider } from 'react-redux'; + import store from './Middlewares/Redux/store'; + // Example end --- to this line if you dont need the template + + {/* Store for Redux */} + + *Here your App* + + {/* Delete the provider if you dont need redux */} +``` + +## Folder Actions + +In this folder you can find the use of redaxios (already implemented) the states and an example of data handling and asynchronous requests + +## Folder Reducers + +In this folder you will find the reducers related to saving data in addition to the initial state + +>For each reducer, 1 file is recommended + +## File Store.js + +In this file is "redux-thunk" implemented to be able to make asynchronous requests with "redaxios" + +There is also the "createStore" method that generates the redux store by combining the necessary amount of reducers + +```javascript +const all_reducers = combineReducers({ Template_reducer_ }); + +const store = createStore(all_reducers, applyMiddleware(thunk)); +``` + +>If you need see the official doc for redux: + +[Documentation](https://es.redux.js.org/docs/basico/) diff --git a/frontend/src/Middlewares/Redux/Reducers/Tempate.reducers.js b/frontend/src/Middlewares/Redux/Reducers/Tempate.reducers.js index 22ea137..5ae643d 100644 --- a/frontend/src/Middlewares/Redux/Reducers/Tempate.reducers.js +++ b/frontend/src/Middlewares/Redux/Reducers/Tempate.reducers.js @@ -1,4 +1,4 @@ -import { RESET, UPDATE_DATA_POKEMON, UPDATE_POKEMON } from '../Actions/Template.actions'; +import { RESET, UPDATE_DATA_POKEMON, UPDATE_POKEMON } from '../Actions/template.actions'; const InitialState = { pokemon: '', diff --git a/frontend/src/Middlewares/Redux/store.js b/frontend/src/Middlewares/Redux/store.js index 8b8ceea..8e039f1 100644 --- a/frontend/src/Middlewares/Redux/store.js +++ b/frontend/src/Middlewares/Redux/store.js @@ -1,9 +1,9 @@ -import { applyMiddleware, combineReducers, createStore } from 'redux'; +import { applyMiddleware, combineReducers, legacy_createStore as createStore } from 'redux'; import thunk from 'redux-thunk'; // Example start --- you can remove from this line -import Template_reducer_ from './Reducers/Tempate.reducers'; -const all_reducers = combineReducers({ Template_reducer_ }); +import Template_reducer_ from './Reducers/tempate.reducers'; // Example end --- to this line if you dont need the template +const all_reducers = combineReducers({ Template_reducer_ }); const store = createStore(all_reducers, applyMiddleware(thunk)); diff --git a/frontend/src/index.js b/frontend/src/index.js index 092017f..72998ab 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -2,8 +2,10 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; +// Example start --- you can remove from this line import { Provider } from 'react-redux'; import store from './Middlewares/Redux/store'; +// Example end --- to this line if you dont need the template const root = ReactDOM.createRoot(document.getElementById('root')); @@ -13,5 +15,6 @@ root.render( + {/* Delete the provider if you dont need redux */} );