gpt4 book ai didi

javascript - 调用 API 时 redux 函数 mapDispatchToProps 错误

转载 作者:行者123 更新时间:2023-11-30 13:55:51 24 4
gpt4 key购买 nike

我想在 reactjs 中使用 redux 从 GitHub 的 API 获取存储库列表,但出现此错误:

./src/components/layouts/page/index.js Line 14: Parsing error: Unexpected token

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

最佳答案

您的 mapDispatchToPropsmapStateToProps 需要在您的组件之外定义,以便被 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);

有关更多信息,请参阅 this .

关于javascript - 调用 API 时 redux 函数 mapDispatchToProps 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57330431/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com