извлекать те же данные или нулевые данные с помощью редуктора

Question

Я построил приложение для поиска пользователей из API.Я использую реаги и редуксы.Проблема начинается, когда я нажимаю поиск с нулевым вводом или когда я ищу ту же строку.Ниже у вас есть все необходимые данные.Боюсь, я не могу решить это сам.

мой редуктор :

import {FETCH_USERS} from '../actions/index';

export default function(state = [], action) {
  switch (action.type){
    case FETCH_USERS:
      return {...state, users: action.payload.data.items
    }
  }
  return state;
}

мое действие , связанное с редуктором:

import axios from 'axios';

const root_url = `https://api.github.com/search/users`;

export const FETCH_USERS = 'FETCH_USERS';

export function fetchUsers(login) {
const request = axios.get(`${root_url}?q=${login}`);
// const andSoOn = request.data;
  return {
    type: FETCH_USERS,
    payload: request
  }
}

и контейнер:

import React,{Component} from 'react';
import {connect} from 'react-redux';
import _ from 'lodash';
import Details from '../../components/Details/Details';
import classes from './UserList.css';

class UserList extends Component {
  state = {
    show: {}
  }

  showContentFunction(index) {
    const itemToShow = {
      ...this.state.show,
      [index]: true
    };
    this.setState({show: itemToShow})
  }
  render(){
    return (
      _.map(this.props.users, user=> user.slice(0,10).map((e,index) => (
        <div
          className={classes.Items}
          key={e.id}
          onClick={() => this.showContentFunction(e.id)}
          >
            { !this.state.show[e.id] ? e.login : null}
            { this.state.show[e.id] ? <Details
                                        className={classes.Details}
                                        name={e.login}
                                        image={e.avatar_url}
                                        score={e.score}
                                        link={e.html_url}
                                      /> : null}
        </div>
      )
    )
  )
  )
  }
}



function mapStateToProps(state) {
  return {
    users: state.users
  }
}

export default connect(mapStateToProps)(UserList);

Ошибка, возникающая при нажатии кнопки без строки или второго раза с той же строкой: необработанное отклонение (TypeError): невозможно прочитать свойство 'items' изне определен

Answer 1

В моем действии вы должны использовать redux-thunk для асинхронного действия.

export function fetchUsers(login) {

// const andSoOn = request.data;
  return (dispatch, getState) => {
    const request = axios.get(`${root_url}?q=${login}`);
    //You make request here
    
    //when received data from server then return data with type of action
    return {
      type: FETCH_USERS,
      payload: data
    }
    
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

В Reducer вы должны объявить состояние инициализации

initState = {
    users: []
}