Проблема при рендеринге данных в следующем js с избыточным потоком - PullRequest
Новая
       21

Проблема при рендеринге данных в следующем js с избыточным потоком

0 голосов
/ 29 марта 2020

Эй, ребята, пожалуйста, помогите мне. Я использую следующее js для серверного рендеринга с помощью redux, поэтому при использовании redux thunk проблема заключается в том, что я получаю свои данные в «источнике страницы», но не могу отобразить их в компоненте ( я думаю, что это каким-то образом вызывает причину, когда я обновляю sh страницу, я вижу эти данные в течение короткого промежутка времени), но если я вызываю создатель действий как из getinitialprops, так и из данных didmount, то они отображаются на экране

Здесь мой код

_app.jsx 

import App from 'next/app';
import {Provider} from 'react-redux';
import React from 'react';
import withRedux from "next-redux-wrapper";
import store from '../redux/store';

class MyApp extends App {

    static async getInitialProps({Component, ctx}) {
        const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
        return {pageProps: pageProps};
    }
    render() {
        const {Component, pageProps, store} = this.props;
        return (
            <Provider store={store}>
                <Component {...pageProps}/>
            </Provider>
        );
    }
}
const makeStore = () => store;
export default withRedux(makeStore)(MyApp);

index.jsx 

import React from "react";
import { connect } from "react-redux";
import { onCallAPI } from "../redux/actions/counterActions";

class Index extends React.Component {
  static getInitialProps({ store }) {

   const users= store.dispatch(onCallAPI());
   console.log('123')

    // return {users};
  }
  componentDidMount() {
    // this.props.onCallAPI()
    console.log(this.props.users);
  }
  render() {
    console.log(this.props);

    return (
      <h1>
        {this.props.users.map(item => (
          <p>{item.title}</p>
        ))}
      </h1>
    );
  }
}

создатель действий 

  import axios from "axios";
export const onCallAPI = () => {
  return (dispatch, getState) =>
    axios.get("https://jsonplaceholder.typicode.com/posts").then(({data})=>data).then(items=>dispatch({type:'API',payload:items}))

};

редуктор 

import { API } from "../actions/counterActions";

const counterReducer = (state = [], action) => {
  switch (action.type) {
    case 'API':
      return action.payload;
    default:
      return state;
  }
};

export default counterReducer;

rootreducer 

import counterReducer from './counterReducer';
import {combineReducers} from 'redux';

const rootReducer = combineReducers({
    counter: counterReducer
});

export default rootReducer;

store. js

import {createStore,applyMiddleware} from 'redux'
import rootReducer from './reducers/rootReducer';
import thunk from 'redux-thunk'
import reducers from './reducers/rootReducer'
const store=createStore(reducers,applyMiddleware(thunk))

export default store;

Кажется, есть небольшая ошибка, которую я не смог понять.

...