Далее. js + Redux: страница загружается до завершения выборки действий с данными в getInitialProps - PullRequest
Новая
       42

Далее. js + Redux: страница загружается до завершения выборки действий с данными в getInitialProps

0 голосов
/ 27 апреля 2020

Я пытаюсь извлечь данные из API, вызвав действие 'getItems' в getInitialProps на странице. (Допустим, это страница A)

Данные могут быть успешно извлечены, если я go в страница A с другой страницы по ссылке (следующая / ссылка).

Однако, если я перефразирую sh на странице 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)

стр. A. 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

1 Ответ

0 голосов
/ 27 апреля 2020

Вы должны дождаться ответа действия getItems на вашей странице getInitialProps перед возвратом и рендерингом.

Я думаю, что если вы попытаетесь использовать await, это решит вашу проблему: 

Index.getInitialProps = async ({ store }) => {
  await store.dispatch(getItems())
  return {}
}
...