Squashed: redux with doc

Rauqoz · Aug 18, 2022 · 774f483 · 774f483
1 parent 69ce29d
commit 774f483
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 63 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git 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
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Rauqoz Template Full Stack MERN"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React Template</title>
+    <title>Rauqoz Template</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git 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
@@ -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 <RoutesPath />;

diff --git 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
@@ -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 */}
+    <Provider store={store}>
+        *Here your App*
+    </Provider>
+    {/* 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
@@ -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
@@ -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
@@ -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(
 		<Provider store={store}>
 			<App />
 		</Provider>
+		{/* Delete the provider if you dont need redux */}
 	</React.StrictMode>
 );