Как я могу получить данные в getInitialProps на стороне сервера при использовании next. js с redux? - PullRequest
Новая
       66

Как я могу получить данные в getInitialProps на стороне сервера при использовании next. js с redux?

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

Я создаю веб-приложение, используя next. js & redux, и пытаюсь получить данные, когда я перехожу на sh или захожу на страницу, набирая URL-адрес напрямую.

Я положил действие getItems в getInitialProps, чтобы оно автоматически запускалось при обновлении страницы, но оно никогда не работает.

Если я нажимаю кнопку действия getItems вручную после обновления страницы, он загружает данные из БД поэтому я думаю, что функция действия работает нормально.

Но как я могу автоматически получать данные при обновлении страницы? 

import Head from 'next/head'
import Link from 'next/link'
import { connect } from 'react-redux'
import { getItems } from '../../store/actions/itemAction'

const Index = props => {
  return (
    <>
      <Head>
        <title>Item List</title>
      </Head>
      <div>
        <Button onClick={() => props.getItems()}>Get Items!</Button>
      </div>
    </>
  )
}

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

const mapStateToProps = state => ({
  goods: state.item.goods,
})

const mapDispatchToProps = dispatch => ({
  getItems: () => dispatch(getItems())
})

export default connect(mapStateToProps, mapDispatchToProps)(Index)

1 Ответ

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

В зависимости от того, какой компонент монтируется при обновлении приложения, необходимо убедиться, что любое действие, извлекающее данные, вызывается в componentDidMount. Например, посмотрите на мое приложение. js ниже, где я вызываю componentDidMount: 

   class App extends React.Component {

      componentDidMount = () => {
        this.props.persistUser()
        this.props.fetchAndSetAllPosts()
        console.log('refreshed')
      }
}

Я импортировал функцию извлечения из папки действий "this.props.fetchAndSetAllPosts ()", которая является действием выборка из API. Каждый раз, когда страница обновляется, компонент монтируется, поэтому должен выполнять все, что вы вызываете в componentDidMount. console.log () сообщение, чтобы убедиться, что оно срабатывает правильно. Позвольте мне знать, если это помогает! Желаем удачи!

...