redux async

package.json

@@ -14,6 +14,7 @@
     "react-scripts": "3.3.0",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
     "tachyons": "^4.11.1"
   },
   "scripts": {

src/actions.js

@@ -1,6 +1,20 @@
 import { CHANGE_SEARCH_FIELD } from "./constants.js";
+import {
+  REQUEST_ROBOTS_PENDING,
+  REQUEST_ROBOTS_SUCCESS,
+  REQUEST_ROBOTS_FAILED
+} from "./constants";
 
 export const setSearchField = text => ({
   type: CHANGE_SEARCH_FIELD,
   payload: text
 });
+
+//Hihger order function returns a function and thunk middleware catches it
+export const requestRobots = () => dispatch => {
+  dispatch({ type: REQUEST_ROBOTS_PENDING });
+  fetch("https://jsonplaceholder.typicode.com/users")
+    .then(response => response.json())
+    .then(data => dispatch({ type: REQUEST_ROBOTS_SUCCESS, payload: data }))
+    .catch(error => dispatch({ type: REQUEST_ROBOTS_FAILED, payload: error }));
+};

src/constants.js

@@ -1 +1,4 @@
 export const CHANGE_SEARCH_FIELD = "CHANGE_SEARCH_FIELD";
+export const REQUEST_ROBOTS_PENDING = "REQUEST_ROBOTS_PENDING";
+export const REQUEST_ROBOTS_SUCCESS = "REQUEST_ROBOTS_SUCCESS";
+export const REQUEST_ROBOTS_FAILED = "REQUEST_ROBOTS_FAILED";

src/containers/App.js

@@ -5,46 +5,50 @@ import Searchbox from "../components/Searchbox";
 import "./App.css";
 import ErrorBoundry from "./ErrorBoundry";
 //REDUX
-import { setSearchField } from "../actions";
+import { setSearchField, requestRobots } from "../actions";
 import { connect } from "react-redux";
 
 const mapStateToProps = state => {
   return {
-    searchField: state.searchField
+    searchField: state.searchRobots.searchField,
+    robots: state.requestRobots.robots,
+    isPending: state.requestRobots.isPending
   };
 };
 
 const mapDispatchToProps = dispatch => {
   return {
-    onSearchChange: event => dispatch(setSearchField(event.target.value))
+    onSearchChange: event => dispatch(setSearchField(event.target.value)),
+    //requestRobots(dispatch)
+    onRequestRobots: () => dispatch(requestRobots())
   };
 };
 
 class App extends Component {
-  constructor() {
-    super();
-    this.state = {
-      robots: []
-    };
-  }
+  //Regular
 
-  componentDidMount() {
+  /*  componentDidMount() {
     fetch("https://jsonplaceholder.typicode.com/users")
       .then(response => response.json())
       .then(users => {
         this.setState({ robots: users });
       });
+  } */
+
+  //REDUX
+  componentDidMount() {
+    this.props.onRequestRobots();
   }
 
   render() {
-    const { robots } = this.state;
-    const { searchField, onSearchChange } = this.props;
+    //const { robots } = this.state;
+    const { robots, searchField, onSearchChange, isPending } = this.props;
 
     const filteredRobots = robots.filter(robot => {
       return robot.name.toLowerCase().includes(searchField.toLowerCase());
     });
 
-    return !robots.length ? (
+    return isPending ? (
       <h1>Loading...</h1>
     ) : (
       <div className="tc">

src/index.js

@@ -5,12 +5,19 @@ import App from "./containers/App";
 import "tachyons";
 //REDUX
 import { Provider } from "react-redux";
-import { createStore, applyMiddleware } from "redux";
-import { searchRobots } from "./reducers";
+import { createStore, applyMiddleware, combineReducers } from "redux";
+import { requestRobots, searchRobots } from "./reducers";
 import { createLogger } from "redux-logger";
+//Async redux
+//Checks for actions that return a function
+import thunkMiddleware from "redux-thunk";
 
 const logger = createLogger();
-const store = createStore(searchRobots, applyMiddleware(logger));
+const rootReducer = combineReducers({ searchRobots, requestRobots });
+const store = createStore(
+  rootReducer,
+  applyMiddleware(thunkMiddleware, logger)
+);
 
 ReactDOM.render(
   <Provider store={store}>

src/reducers.js

@@ -1,10 +1,15 @@
 import { CHANGE_SEARCH_FIELD } from "./constants.js";
+import {
+  REQUEST_ROBOTS_PENDING,
+  REQUEST_ROBOTS_SUCCESS,
+  REQUEST_ROBOTS_FAILED
+} from "./constants";
 
-const initaiState = {
+const initaiStateSearch = {
   searchField: ""
 };
 
-export const searchRobots = (state = initaiState, action = {}) => {
+export const searchRobots = (state = initaiStateSearch, action = {}) => {
   switch (action.type) {
     case CHANGE_SEARCH_FIELD:
       //{...state,searchField,{searchField:action.payload}}
@@ -15,3 +20,27 @@ export const searchRobots = (state = initaiState, action = {}) => {
       return state;
   }
 };
+
+const initaiStateRobots = {
+  isPending: true,
+  robots: []
+};
+
+export const requestRobots = (state = initaiStateRobots, action = {}) => {
+  switch (action.type) {
+    case REQUEST_ROBOTS_PENDING:
+      return Object.assign({}, state, { isPending: true });
+    case REQUEST_ROBOTS_SUCCESS:
+      return Object.assign({}, state, {
+        robots: action.payload,
+        isPending: false
+      });
+    case REQUEST_ROBOTS_FAILED:
+      return Object.assign({}, state, {
+        error: action.payload,
+        isPending: false
+      });
+    default:
+      return state;
+  }
+};