mightycode Newton
mightycode Newton

Reputation: 3949

asynchrone api calls with redux

I have a react application and I try to implement redux within this application.

So my files look like this:

reducer.js

import {
    CHANGE_SEARCH_FIELD,
    REQUEST_ROBOTS_FAILED,
    REQUEST_ROBOTS_PENDING,
    REQUEST_ROBOTS_SUCCESS
} from './constants';

const initialState = {
    searchField: ''
}

export const searchRobots = (state = initialState, action = {}) => {
    console.log(action.type);

    switch (action.type) {
        case CHANGE_SEARCH_FIELD:
            return Object.assign({}, state, { searchField: action.payload });
        default:
            return state;
    }
}


const initialStateRobots = {
    robots: [],
    isPending: true
}

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 })
        default:
            return state
    }
}

actions.js

import {
    CHANGE_SEARCH_FIELD,
    REQUEST_ROBOTS_FAILED,
    REQUEST_ROBOTS_PENDING,
    REQUEST_ROBOTS_SUCCESS
} from './constants'

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(data => dispatch({ type: REQUEST_ROBOTS_SUCCESS, payload: data }))
        .catch(error => dispatch({ type: REQUEST_ROBOTS_FAILED, payload: error }))
}

index.js:

const logger = createLogger();
const rootReducer = combineReducers({searchRobots, requestRobots});
const store = createStore(rootReducer, applyMiddleware( thunkmiddleware,logger));


ReactDOM.render(<Provider store={store}>
    <App />
</Provider>, document.getElementById('root'));
registerServiceWorker();

and app.js:


const mapStateToProps = state => {
  return {
    searchField: state.searchField,
    robots: state.requestRobots.robots,
    isPending: state.requestRobots.isPending
  }
};


const mapDispatchToProps = (dispatch) => {
  return {
    onSearchChange: (event) => dispatch(setSearchField(event.target.value)),
    onRequestRobots: () => dispatch(requestRobots())
  }
}

function App(props) {



  useEffect(() => {
    props.onRequestRobots();
    console.log(props);
  }, []);



 
  const filteredRobots = robots.filter(robot => {
    return robot.name.toLowerCase().includes(searchField.toLowerCase());
  });
  return !robots.length ?
    <h1>Loading</h1> :
    (
      <div className='tc'>
        <h1 className='f1'>RoboFriends</h1>
        <SearchBox searchChange={props.onSearchChange} />
        <Scroll>
          <CardList robots={filteredRobots} />
        </Scroll>
      </div>
    );

}

export default connect(mapStateToProps, mapDispatchToProps)(App);

But I get this errror:

ReferenceError: robots is not defined
App
E:/Mijn Documents/UDEMY/REACT/robofriends-master/src/containers/App.js:40
  37 | 
  38 | 
  39 | //const { robots, searchField, onSearchChange, isPending } = props;
> 40 | const filteredRobots = robots.filter(robot => {
     | ^  41 |   return robot.name.toLowerCase().includes(searchField.toLowerCase());
  42 | });
  43 | return !robots.length ?

my question: what I have to change?

Thank you

Upvotes: 0

Views: 47

Answers (1)

Saeed Shamloo
Saeed Shamloo

Reputation: 6554

You should get robots from props like this:

const filteredRobots = props.robots.filter(robot => {
  return robot.name.toLowerCase().includes(searchField.toLowerCase());
});

Upvotes: 1

Related Questions