Далее. js + Redux: данные, извлекаемые на стороне сервера, никогда не перемещаются на реквизиты страницы. - PullRequest
Новая
       29

Далее. js + Redux: данные, извлекаемые на стороне сервера, никогда не перемещаются на реквизиты страницы.

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

Я создаю веб-приложение, используя next. js & redux, и пытаюсь извлечь данные из getInitialProps на стороне сервера.

Существует готовое к запуску действие избыточности в getInitialProps, которое получает срабатывает, когда я нажимаю или обновляю sh страницу.

Проблема заключается в том, что после того, как она запускается, данные извлекаются из БД и успешно сохраняются в хранилище избыточных данных, но сохраненные данные никогда не перемещаются в подпорки страницы, поэтому я не могу использовать извлеченные данные вообще.

Если после запуска действия я проверяю «store.getState ()», из БД извлекаются данные.

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

Что я здесь не так делаю и как я могу в первую очередь автоматически отправлять сохраненные данные на реквизиты страницы? ? 

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)

Вот элемент редуктор. 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
...