Async actions through redux-thunk

package.json

@@ -9,6 +9,7 @@
     "react-scripts": "3.0.0",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
     "tachyons": "^4.11.1"
   },
   "scripts": {

src/Containers/App.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import './App.css';
 import { connect } from 'react-redux';
 // import { search_Robots } from '../reducers'
-import { setSearchField } from '../actions'
+import { setSearchField, requestRobotsData } from '../actions'
 import CardList from '../Components/CardList';
 import SearchBox from '../Components/SearchBox';
 import Scroll from '../Components/Scroll';
@@ -13,39 +13,46 @@ import ErrorBoundary from '../Components/ErrorBoundary';
 
 const mapStateToProps = (state) => {  // well get this (state) and searchField property on reducers file
   return {
-    searchField: state.searchField
+    searchField: state.search_Robots.searchField,
+    robots: state.requestRobots.robots,
+    error: state.requestRobots.error,
+    isPending: state.requestRobots.isPending,
   }
   // return searchField: state.serch_Robots.searchField
 }
 
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    onSearchChange: (event) => {
-      dispatch(setSearchField(event.target.value))
-    }
+
+    onSearchChange: (event) => dispatch(setSearchField(event.target.value)),
+
+    onRequestRobots: () => dispatch(requestRobotsData())
+
   }
 }
 
 
 
 class App extends Component {
-  constructor(){
-    super();
-    this.state = {
-      robots: [],
-      // searchField: ''
-    }
-    // console.log("constructor");
-  }
+  // constructor(){
+  //   super();
+  //   this.state = {         // don't need this constructor, because no more state with Redux
+  //     robots: [],
+  //     // searchField: ''
+  //   }
+  //   // console.log("constructor");
+  // }
 
   componentDidMount() {
     // console.log( this.props.store.getState() );
     // console.log("componentDidMount");
 
-    fetch('https://jsonplaceholder.typicode.com/users')   // whe're fetch data here
-    .then((response) => response.json())    // whe're getting a response here
-    .then((users) => this.setState({ robots: users }))
+    // fetch('https://jsonplaceholder.typicode.com/users')   // whe're fetch data here
+    // .then((response) => response.json())    // whe're getting a response here
+    // .then((users) => this.setState({ robots: users }))
+
+    this.props.onRequestRobots()
   }
 
   // onSearchChange = (event) => {
@@ -70,9 +77,9 @@ class App extends Component {
 
   render() {
 
-    const { robots } = this.state
+    // const { robots } = this.state
 
-    const { searchField, onSearchChange } = this.props
+    const { searchField, onSearchChange, robots } = this.props
 
     const robots_filtered = robots.filter((robot) => {
       // return console.log(robot);

src/actions.js

@@ -1,4 +1,11 @@
-import { CHANGE_SEARCH_FIELD } from './constants'
+import {
+
+    CHANGE_SEARCH_FIELD,
+    ROBOT_REQUEST_PENDING,
+    ROBOT_REQUEST_SUCCESS,
+    ROBOT_REQUEST_FAILED
+
+} from './constants'
 
 
 export const setSearchField = (text) => ({
@@ -14,3 +21,12 @@ export const setSearchField = (text) => ({
 //     payload: text
 //   }
 // }
+
+
+export const requestRobotsData = () => (dispatch) => {
+    dispatch({ type: ROBOT_REQUEST_PENDING })
+    fetch('https://jsonplaceholder.typicode.com/users')
+        .then((response) => response.json())
+        .then((data) => dispatch({ type: ROBOT_REQUEST_SUCCESS, payload: data }))
+        .catch((error) => dispatch({ type: ROBOT_REQUEST_FAILED, payload: error }))
+}

src/constants.js

@@ -1 +1,6 @@
-export const CHANGE_SEARCH_FIELD = 'CHANGE_SEARCH_FIELD'
+
+
+export const CHANGE_SEARCH_FIELD = 'CHANGE_SEARCH_FIELD'
+export const ROBOT_REQUEST_PENDING = 'ROBOT_REQUEST_PENDING'
+export const ROBOT_REQUEST_SUCCESS = 'ROBOT_REQUEST_SUCCESS'
+export const ROBOT_REQUEST_FAILED = 'ROBOT_REQUEST_FAILED'

src/index.js

@@ -5,19 +5,24 @@ import './index.css';
 // import Card from './Card';
 // import CardList from './CardList';
 import App from './Containers/App';
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, combineReducers } from 'redux';
 import { Provider } from 'react-redux';
-import { search_Robots } from './reducers';
+import { search_Robots, requestRobots } from './reducers';
 import 'tachyons';
 import * as serviceWorker from './serviceWorker';
 // import { robots } from './robots';
 import logger from 'redux-logger'
+import thunk from 'redux-thunk'
 
 
+const rootReducer =  combineReducers({
+    search_Robots,
+    requestRobots
+})
 
 // const store = createStore(rootReducer)
 
-const store = createStore( search_Robots, applyMiddleware(logger) )
+const store = createStore( rootReducer, applyMiddleware(thunk, logger) )
 
 ReactDOM.render(
     <Provider store= { store } >

src/reducers.js

@@ -1,4 +1,12 @@
-import { CHANGE_SEARCH_FIELD } from './constants'
+import {
+
+    CHANGE_SEARCH_FIELD,
+    ROBOT_REQUEST_PENDING,
+    ROBOT_REQUEST_SUCCESS,
+    ROBOT_REQUEST_FAILED
+
+} from './constants'
+
 
 const initialState = {
     searchField: ''
@@ -14,4 +22,25 @@ export const search_Robots = (state= initialState, action= {}) => {
         default:
             return state;
     }
+}
+
+
+const initialStateRequest = {
+    robots: [],
+    isPending: false,
+    error: ''
+}
+
+export const requestRobots = (state= initialStateRequest, action= {}) => {
+    switch (action.type) {
+        case ROBOT_REQUEST_PENDING:
+            return Object.assign({}, state, { isPending: true })
+        case ROBOT_REQUEST_SUCCESS:
+            return Object.assign({}, state, { robots: action.payload ,isPending: false })
+            // return { ...state, { searchField: action.payload } }
+        case ROBOT_REQUEST_FAILED:
+            return Object.assign({}, state, { error: action.payload, isPending: false })
+        default:
+            return state;
+    }
 }