调用API时，Redux函数mapDisPatchToprops错误

Question

我想在reactj中使用redux从github的API获取存储库列表，但是我会遇到此错误：

./src/components/layouts/page/index.js行14：解析错误： 意外的令牌

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

这些是我的文件：

actions.js

export function fetchRepos() {
  return function(dispatch) {
    dispatch({
      type: 'FETCH_REPOS_REQUEST'
    });
    return fetch('curl 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
          });
        }
      }
    );
  }
}

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/index.js

import { combineReducers } from 'redux';
import repos from './reducers';
const rootReducer = combineReducers({
    repos,
});
export default rootReducer;

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
});

page.js

import React, { Component } from 'react';
import List from '../list/index.js';    
import { connect } from 'react-redux';
import { fetchRepos } from '../../../actions/actions';
import './page.scss';
class Page extends Component {
  componentDidMount() {
    this.props.fetchRepos();
  }
  function mapDispatchToProps(dispatch) {
    return {
      fetchRepos: function() {
        dispatch(fetchRepos());
      }
    };
  }
  function mapStateToProps(state) {
    return {
      repos: state.repos
    };
  }
  render() {
    return <List items={this.props.repos}/>
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Page);

Answer 1

您的 mapDispatchToProps和 mapStateToProps需要在组件之外定义，以便由connect使用：

class Page extends Component {
  componentDidMount() {
    this.props.fetchRepos();
  }
  render() {
    const { repos } = this.props;
    return <List items={repos} />;
  }
}
const mapDispatchToProps = dispatch => ({
  fetchRepos: () => dispatch(fetchRepos())
});
const mapStateToProps = state => ({
  repos: state.repos
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Page);

有关更多信息，请参阅此信息。