[我试图通过在页面的getInitialProps中触发'getItems'操作来获取API的数据。（假设它是页面A）
如果我通过Link（next / link）从其他页面转到页面A，则可以成功获取数据。
但是，如果我在页面A中刷新，则永远不会获取数据，而我必须通过触发getItems操作来手动获取数据。
有人可以让我知道即使刷新页面时我也应该获取数据吗？
__ app.js
const MyApp = props => {
const { Component, pageProps, store } = props
return (
<>
<Head>
<link rel='stylesheet' href='/styles/global.css' />
</Head>
<Provider store={store}>
<MainLayout>
<Component {...pageProps} />
</MainLayout>
</Provider>
</>
)
}
MyApp.getInitialProps = async ({ Component, ctx }) => {
const pageProps = Component.getInitialProps
? await Component.getInitialProps(ctx)
: {}
return { pageProps }
}
export default withRedux(store)(MyApp)
pageA.js
import Head from 'next/head'
import Link from 'next/link'
import { connect } from 'react-redux'
import { getItems, addItem } from '../../store/actions/itemAction'
import { GET_ITEMS } from '../../store/types'
const Index = props => {
return (
<>
<Head>
<title>Item List</title>
<link rel='stylesheet' href='/styles/css_pages/shop.css' />
</Head>
<div><div>
</>
)
}
Index.getInitialProps = async ({ store }) => {
await store.dispatch(getItems())
return {}
}
const mapStateToProps = state => ({
goods: state.item.goods,
})
const mapDispatchToProps = dispatch => ({
getItems: () => dispatch(getItems()),
addItem: () => dispatch(addItem()),
})
export default connect(mapStateToProps, mapDispatchToProps)(Index)
itemAction.js
import fetch from 'isomorphic-unfetch'
import { GET_ITEMS } from '../types'
export const getItems = () => {
return dispatch => {
fetch('http://localhost:5000/item')
.then(res => res.json())
.then(data => dispatch({ type: GET_ITEMS, payload: data }))
.catch(err => console.error(err))
}
}
itemReducer.js
import { GET_ITEMS } from '../types'
const initialState = { goods: [], loading: false }
const itemReducer = (state = initialState, action) => {
switch (action.type) {
case GET_ITEMS:
return {
...state,
goods: action.payload,
loading: false,
}
default:
return state
}
}
export default itemReducer
store.js
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './rootReducer'
const bindMiddleware = middleware => {
if (process.env.NODE_ENV !== 'production') {
const { composeWithDevTools } = require('redux-devtools-extension')
return composeWithDevTools(applyMiddleware(...middleware))
}
return applyMiddleware(...middleware)
}
export const store = () => createStore(rootReducer, bindMiddleware([thunk]))
rootReducer.js
import { combineReducers } from 'redux'
import itemReducer from './reducers/itemReducer'
const rootReducer = combineReducers({
item: itemReducer
})
export default rootReducer
返回和呈现之前，您应该在pageA的getItems中等待getInitialProps操作响应。
我想如果您尝试使用await，它将解决您的问题：
Index.getInitialProps = async ({ store }) => {
await store.dispatch(getItems())
return {}
}