Js codes

package.json

@@ -17,5 +17,17 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/actions/index.js

@@ -1,3 +1,21 @@
+import axios from "axios";
+import { dispatch } from "rxjs/internal/observable/pairs";
+export const FETCH_START = "FETCH_START";
+export const FETCH_SUCCESS = "FETCH_SUCCESS";
+export const FETCH_FAILURE = "FETCH_FAILURE";
+
+export const getPeople = () => dispatch => {
+    dispatch({type: FETCH_START})
+
+    axios
+        .get("http://swapi.co/api/people")
+        .then(res => {
+            console.log(res.data)
+            dispatch({type: FETCH_SUCCESS, payload: res.data})
+        })
+        .catch(err => dispatch({type: FETCH_FAILURE, payload: err}))
+}
+
 // we'll need axios
 
 // we'll need to create 3 different action types here.

src/index.js

@@ -3,17 +3,19 @@ import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
 import { Provider } from "react-redux";
-import { createStore } from "redux";
+import thunk from "redux-thunk"
+import { createStore, applyMiddleware } from "redux";
 import rootReducer from "./reducers";
+import logger from "redux-logger";
 // needed dependancies
 // applyMiddleware from redux
 // thunk from redux-thunk
 // logger from redux-logger
 // rootReducer from ./reducers
 
 const store = createStore(
-  rootReducer
-  /* applyMiddleware goes here */
+  rootReducer,
+  (applyMiddleware(logger, thunk))
 );
 
 ReactDOM.render(

src/reducers/starWarsReducer.js

@@ -1,14 +1,38 @@
-import /* we need our action types here*/ "../actions";
+import {FETCH_START, FETCH_SUCCESS, FETCH_FAILURE} from "../actions";
+
 const initialState = {
-  characters: []
+  characters: [],
+  error: '',
+  isLoading: false,
+  starWars: null
   // Array characters, Boolean fetching, null error.
 };
-export const charsReducer = (state = initialState, action) => {
+const charsReducer = (state = initialState, action) => {
   switch (action.type) {
+    case FETCH_START:
+      return {
+        ...state,
+        error: null,
+        isLoading: true
+      };
+    case FETCH_SUCCESS: 
+      return {
+        ...state,
+        isLoading: false,
+        characters: [...state.characters, ...action.payload]
+      };
+    case FETCH_FAILURE:
+      return {
+        ...state,
+        isLoading: false,
+        error: "I..I...i dont even want to hear it. Erase whatever you put in WRONG, and try again!!!"
+      }
     // Fill me in with the important reducers
     // action types should be FETCHING, SUCCESS and FAILURE
     // your switch statement should handle all of these cases.
     default:
       return state;
   }
 };
+
+export default charsReducer;

src/views/CharacterListView.js

@@ -2,6 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 
 import { CharacterList } from "../components";
+import {getPeople} from "../actions"
 // import actions
 
 class CharacterListView extends React.Component {
@@ -10,11 +11,15 @@ class CharacterListView extends React.Component {
   }
 
   componentDidMount() {
+    this.props.getPeople()
     // call our action
   }
 
   render() {
     if (this.props.fetching) {
+      return (
+        <h1>Im Getting Dressed, give me a second!</h1>
+      )
       // return something here to indicate that you are fetching data
     }
     return (
@@ -25,11 +30,15 @@ class CharacterListView extends React.Component {
   }
 }
 
-// our mapStateToProps needs to have two properties inherited from state
-// the characters and the fetching boolean
-export default connect(
-  null /* mapStateToProps replaces null here */,
-  {
-    /* action creators go here */
+const mapStateToProps = state => {
+  return {
+    characters: state.charsReducer.characters,
+    fetching: state.charsReducer.fetching,
+    error: state.charsReducer.error
   }
-)(CharacterListView);
+}
+
+export default connect(
+mapStateToProps, 
+{getPeople})
+(CharacterListView);