petición y visualización de data

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "axios": "^0.19.2",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",

redux-banks/src/App.js

@@ -1,13 +1,17 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
 import List from './components/List';
+import store from "./store";
+import { Provider } from "react-redux";
 
 function App() {
   return (
-    <div className="App">
-      <List/>
-    </div>
+    <Provider store={store}>
+      <div className="App">
+        <List/>
+      </div>
+    </Provider>
+
   );
 }
 

redux-banks/src/actions/banks.js

@@ -0,0 +1,16 @@
+import axios from 'axios';
+import { GET_BANKS } from './types';
+
+export const getBanks = () => (dispatch, getState) => {
+	axios
+		.get("https://api.myjson.com/bins/19e11s")
+		.then(res => {
+			dispatch({
+				type: GET_BANKS,
+				payload: res.data
+			});
+		})
+		.catch(err =>
+			console.log(err)
+		);
+}

redux-banks/src/actions/types.js

@@ -0,0 +1 @@
+export const GET_BANKS = "GET_BANKS";

redux-banks/src/components/List.js

@@ -1,45 +1,61 @@
 import React, {Component} from "react";
 import { connect } from "react-redux";
-import {} from "tachyons"; 
+import "tachyons"; 
+import { getBanks } from "../actions/banks";
+import PropTypes from "prop-types";
 
 class List extends Component{
-	constructor(props){
-		super(props);
-
+	static propTypes = {
+		banks: PropTypes.array.isRequired,
+		getBanks: PropTypes.func.isRequired,
 	}
 
 	componentDidMount(){
-		console.log("aqui va la petición")
+		this.props.getBanks();
 	}
 
 	render(){
+		const {banks} = this.props;
+
+		const allbanks = banks.map(bank => (
+			<div dataname="component" key={`${bank.bankName}`}>
+				<main className="mw6 center">
+					<div className="dt w-100 bb b--black-10 pb2 mt2 dim tl">
+						<article>
+							<div className="dtc w3">
+								<img src={bank.url} alt="Bank Logo" className="db w-100"/>
+							</div>
+							<div className="dtc v-top pl2">
+								<h1 className="f6 f5-ns fw6 lh-title black mv0">{bank.bankName}</h1>
+								<h2 className="f6 fw4 mt2 mb0 black-60">{bank.description}</h2>
+								<h2 className="f6 fw4 mt2 mb0 black-60">Antigüedad: {bank.age} años</h2>
+							</div>
+						</article>
+					</div>
+				</main>
+			</div>
+		))
+
 		return(
 			<div>
-				<header class="tc ph4">
-				  <h1 class="f3 f2-m f1-l fw2 black-90 mv3">
+				<header className="tc ph4">
+				  <h1 className="f3 f2-m f1-l fw2 black-90 mv3">
 				    Bancos
 				  </h1>
 				</header>
-				<div dataName="component">
-					<main className="mw6 center">
-						<div className="dt w-100 bb b--black-10 pb2 mt2 dim tl">
-							<article>
-								<div className="dtc w3">
-									<img src="https://public-liarla.s3.us-east-2.amazonaws.com/ico_pagatodo.png" alt="Bank Logo" className="db w-100"/>
-								</div>
-								<div className="dtc v-top pl2">
-									<h1 className="f6 f5-ns fw6 lh-title black mv0">Aquí va el nombre del banco</h1>
-									<h2 className="f6 fw4 mt2 mb0 black-60">Aquí va la descripción</h2>
-									<h2 className="f6 fw4 mt2 mb0 black-60">Aquí va la antigüedad</h2>
-								</div>
-							</article>
-						</div>
-					</main>
-				</div>
+				{allbanks}
 			</div>
 
 		)
 	}
 } 
 
-export default List;
+const mapStateToProps = state => ({
+  banks: state.banks.banks,
+
+});
+
+export default connect(
+	mapStateToProps,
+	{ getBanks }
+) (List);

redux-banks/src/reducers/banks.js

@@ -0,0 +1,18 @@
+import { GET_BANKS } from '../actions/types.js';
+
+const initialState = {
+  banks: [],
+
+};
+
+export default function(state = initialState, action){
+	switch (action.type) {
+		case GET_BANKS:
+			return {
+				...state,
+				banks: action.payload,
+			};
+		default:
+		 return state;
+	}
+}

redux-banks/src/reducers/index.js

@@ -1,2 +1,6 @@
 import { combineReducers } from "redux";
-
+import banks from "./banks";
+
+export default combineReducers({
+	banks
+}); 

redux-banks/src/store.js

@@ -0,0 +1,15 @@
+import { createStore, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+import rootReducer from "./reducers";
+
+const initialState = {};
+
+const middleware = [thunk];
+
+const store = createStore(
+  rootReducer,
+  initialState,
+  applyMiddleware(...middleware)
+);
+
+export default store;

yarn.lock

@@ -9,6 +9,27 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+axios@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
+  dependencies:
+    follow-redirects "1.5.10"
+
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
+[email protected]:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -28,6 +49,11 @@ loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+[email protected]:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
 object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"