Javascript 我能'；t使用redux with react.js从github api获取响应

我想从GitHub API获得一个包含存储库的响应，我得到的只是一个空数组，这是我第一次在react中使用redux和redux thunk，这是我的代码：

App.js

import React from 'react';
import './App.css';
import Page from './components/layouts/page/index';
import { Provider } from 'react-redux'

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

function App() {
  return (
    <Provider store={store}>
      <Page />
    </Provider>
  );
}

export default App;

reducers/reducers.js

import { combineReducers } from 'redux';

const INITIAL_STATE = {
  items: [],
  isFetching: false,
  error: undefined
};

function reposReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'FETCH_REPOS_REQUEST':
      return Object.assign({}, state, {
        isFetching: true
      });
    case 'FETCH_REPOS_SUCCESS':
      return Object.assign({}, state, {
        isFetching: false,
        repos: action.repos
      });
    case 'FETCH_REPOS_FAILURE':
      return Object.assign({}, state, {
        isFetching: false,
        error: action.error
      });
    default:
      return state;
  }
}

export default combineReducers({
  repos: reposReducer
});

actions/actions.js

export function fetchRepos() {
  return function(dispatch) {
    dispatch({
      type: 'FETCH_REPOS_REQUEST'
    });

    return fetch('https://api.github.com/search/repositories?q=sort=stars&order=desc')
      .then(response => response.json().then(body => ({ response, body})))
      .then(({ response, body }) => {
        if (!response.ok) {
          dispatch({
            type: 'FETCH_REPOS_FAILURE',
            error: body.error
          });
        } else {
          dispatch({
            type: 'FETCH_REPOS_SUCCESS',
            repos: body.repos
          });
        }
      }
    );
  }
}

pages.js

import React, { Component } from 'react';
import List from '../list/index.js';
import './page.scss';

import { connect } from 'react-redux';
import { fetchRepos } from '../../../actions/actions';

class Page extends Component {

  componentDidMount() {
    this.props.fetchRepos();
  }

  render() {
    console.log(this.props);
    return <div className="page"><List items={this.props.repos}/></div>
  }
}

function mapDispatchToProps(dispatch) {
  return {
    fetchRepos: function() {
      dispatch(fetchRepos());
    }
  };
}

function mapStateToProps(state) {
  return {
    repos: state.repos
  };
}

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

import React，{Component}来自'React'；
从“../List/index.js”导入列表；
导入“/page.scss”；
从'react redux'导入{connect}；
从“../../../actions/actions”导入{fetchRepos}；
类页面扩展组件{
componentDidMount（）{
this.props.fetchRepos（）；
}
render（）{
console.log（this.props）；
返回
}
}
功能图DispatchToprops（调度）{
返回{
fetchRepos:function（）{
分派（fetchRepos（））；
}
};
}
函数MapStateTops（状态）{
返回{
repos:state.repos
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（第页）；

---

我想以数组的形式获取响应，并将其作为

prop

传递到

List

组件并在那里操作它！请让我知道我应该改变什么，什么我做得不对，谢谢你的帮助

从服务器返回的json包含

body.items

，您正在尝试从

body.repos

读取它

将您的操作更改为：

导出函数fetchRepos（）{ 返回功能（调度）{ 派遣({ 键入：“获取请求”， }); 回传( "https://api.github.com/search/repositories?q=sort=stars&order=desc", ) .then（response=>response.json（）.then（body=>（{response，body}））） 。然后（{response，body}）=>{ 如果（！response.ok）{ 派遣({ 类型：“获取\回购\失败”， 错误：body.error， }); }否则{ 派遣({ 键入：“获取\回购\成功”， 回购协议：主体。项目， }); } }); }; }

import React, { Component } from 'react';
import List from '../list/index.js';
import './page.scss';

import { connect } from 'react-redux';
import { fetchRepos } from '../../../actions/actions';

class Page extends Component {

  componentDidMount() {
    this.props.fetchRepos();
  }

  render() {
    console.log(this.props);
    return <div className="page"><List items={this.props.repos}/></div>
  }
}

function mapDispatchToProps(dispatch) {
  return {
    fetchRepos: function() {
      dispatch(fetchRepos());
    }
  };
}

function mapStateToProps(state) {
  return {
    repos: state.repos
  };
}

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