Redux

connect , actions , reducers , constants , middleware , logger etc

package.json

@@ -12,6 +12,8 @@
     "react-redux": "^7.2.0",
     "react-scripts": "3.4.1",
     "redux": "^4.0.5",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
     "tachyons": "^4.12.0"
   },
   "scripts": {

src/actions.js

@@ -1,6 +1,18 @@
-import { CHANGE_SEARCH_FIELD } from './constants.js';
+import { CHANGE_SEARCH_FIELD , 
+         REQUEST_ROBOTS_PENDING , 
+         REQUEST_ROBOTS_SUCCESS ,
+         REQUEST_ROBOTS_FAILED 
+        } from './constants.js';
 
 export const setSearchField = (text) => ({
     type: CHANGE_SEARCH_FIELD,
     payload : text
-})
+})
+
+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,5 @@
-export const CHANGE_SEARCH_FIELD = 'CHANGE_SEARCH_FIELD';
+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

@@ -6,62 +6,50 @@ import Scroll from '../components/Scroll';
 import ErrorBoundary from '../components/ErrorBoundary';
 import './App.css';
 
-import { setSearchField } from '../actions'; 
+import { setSearchField, requestRobots } from '../actions'; 
 
 const mapStateToProps = (state) => {
     return {
-        searchField: state.searchField
+        searchField: state.searchRobots.searchField,
+        robots: state.requestRobots.robots,
+        isPending: state.requestRobots.isPending,
+        error: state.requestRobots.error
     }
 }
 
 const mapDispatchToProps = (dispatch) => {
     return {
-        onSearchChange: (event) => dispatch(setSearchField(event.target.value))
+        onSearchChange: (event) => dispatch(setSearchField(event.target.value)),
+        onRequestRobots: () => dispatch(requestRobots())
     } 
 }
 
-class App extends Component {
-    constructor(){
-        super()
-        this.state = {
-            robots : []
-        }
-    }
+class App extends Component { 
 
     componentDidMount(){
-        fetch('https://jsonplaceholder.typicode.com/users')
-        .then(response => response.json())
-        .then(users => this.setState({robots : users}))
+        this.props.onRequestRobots();
     }
 
     render() {
-        const {robots } = this.state; //destructuring
-        const { searchField , onSearchChange } = this.props;
+        const { searchField , onSearchChange , robots , isPending } = this.props;
         const filteredRobots = robots.filter(robot =>{
             return robot.name.toLowerCase().includes(searchField.toLowerCase());
         })
-
-        if(!robots.length) //will check if it's equal to 0 
-        {
-            return (
-                <h1>Loading...</h1>
-            )
-        }
-        else{
-            return (
+
+            return isPending ? 
+            <h1>Loading...</h1> : 
+            (
                 <div className='tc'>
                     <h1 className='f1'>RoboFriends</h1>
                     <SearchBox SearchChange={onSearchChange}/>
                     <Scroll>
                         <ErrorBoundary>
                         <CardList robots= {filteredRobots}/>
                         </ErrorBoundary>
-                    </Scroll>
-
+                    </Scroll>   
                 </div>
             );
         } 
     }
-}
 
 export default connect(mapStateToProps , mapDispatchToProps)(App);

src/index.js

@@ -1,14 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { createStore } from 'redux';
+import { createStore , applyMiddleware , combineReducers } from 'redux';
+import { createLogger } from 'redux-logger';
+import thunkMiddleware from 'redux-thunk';
 import './index.css';
 import App from './containers/App';
 import * as serviceWorker from './serviceWorker';
-import { searchRobots } from './reducers';
+import { searchRobots , requestRobots } from './reducers';
 import 'tachyons';
 
-const store = createStore(searchRobots)
+const logger = createLogger();
+
+const rootReducer = combineReducers ({ searchRobots , requestRobots });
+const store = createStore(rootReducer, applyMiddleware(thunkMiddleware , logger))
 
 ReactDOM.render(
         <Provider store={store}>

src/reducers.js

@@ -1,14 +1,37 @@
-import { CHANGE_SEARCH_FIELD } from './constants.js';
+import { CHANGE_SEARCH_FIELD , 
+    REQUEST_ROBOTS_PENDING , 
+    REQUEST_ROBOTS_SUCCESS ,
+    REQUEST_ROBOTS_FAILED 
+} from './constants.js';
 
-const initialState = {
+const initialStateSearch = {
     searchField: ''
 }
 
-export const searchRobots = (state=initialState, action={}) => {
+export const searchRobots = (state=initialStateSearch, action={}) => {
     switch(action.type){
         case CHANGE_SEARCH_FIELD:
             return Object.assign({} , state , {searchField: action.payload});
         default:
             return state;
     }
-} 
+} 
+
+const initialStateRobots = {
+    isPending: false,
+    robots : [],
+    error : ''
+}
+
+export const requestRobots = (state=initialStateRobots ,  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;
+    }
+}