загрузить данные сервера в начальном состоянии приставки в приложении SSR - PullRequest
Новая
       35

загрузить данные сервера в начальном состоянии приставки в приложении SSR

1 голос
/ 12 июня 2019

Я создал веб-сайт, который представляет собой приложение React + Redux Serveride Render, для загрузки данных с сервера. Я отправляю действие на componentWillMount, но это асинхронный запрос, который загружает данные из AWS, и для ответа, к сожалению, требуется 2-3 секунды. Google сканер контента не сканирует контент, который крайне необходим. Поэтому мне нужно применить подход, чтобы установить данные сервера для начального состояния редукции, чтобы он мог открывать веб-приложение с полным содержимым, но я не понимаю, как этого добиться, мой код.

Store.js 

import {createStore, combineReducers} from 'redux'
import {GET_CARDS} from '../actions/cardsAction';

//here is my reducer
function mycards(state={},{type,payload}){
    switch(type){
        case GET_CARDS :  return {data:" test mydata"};
        default : return state;
    }
}

const allreducer = combineReducers({
    cards: mycards
})

export const configurestore=(initState)=>{

    const store = createStore(
        allreducer,
        initState
    )
    return store;
}

вот мой Action.js 

import dataloader from '../server/dataloader';
export const GET_CARDS ='GET_CARDS';

export function getcards(){

    return async (dispatch) =>{

 //Dataloader is another module which returns Aws server data it is working fine

        let _serverdata = await dataloader()        
            dispatch({
                type:GET_CARDS,
                payload:{
                    data:_serverdata
                }
            })
    }
}

Server.js 

import {Provider} from 'react-redux';
import {configurestore,datasetter} from './store/store';
const port = process.env.PORT || 8080;
const server = express();

..other express code

server.get('*', (req, res, next) => {

  const context = {data};
  const store = configurestore();
  const jsx = (
            <Provider store={store}>
              <StaticRouter context={context} location={req.url}>
                  <Template />
              </StaticRouter>
            </Provider>
        );

        const reactDom = renderToString(jsx);

        res.writeHead( 200, { "Content-Type": "text/html" } );
        res.end( htmlTemplate(reactDom,data) );

    }).catch(next)
})


function htmlTemplate( reactDom,data ) {
  return `basic html code`;
}

вот мой index.js 

import React from "react";
import { hydrate } from "react-dom"
import App from "./client/App";
import { BrowserRouter } from "react-router-dom";
import 'babel-polyfill';
import {Provider} from 'react-redux';
import {configurestore} from './store/store';

const store = configurestore({})

    hydrate( 
        <Provider store={store}>
            <BrowserRouter> 
                <Template />
            </BrowserRouter>
        </Provider>
        , 
        document.getElementById("app")
    )

my Component.js 

import React, { Component } from 'react';
import {connect} from 'react-redux';    
class Home extends Component {
      constructor(){
        super() 
      }

      render() {
        return (
          <div>
            <h1>Home</h1>
          </div>
        );
      }
    }

    const mapStateToProps = state =>{
      console.log(state,"<<<State in homepage")
      return state;
    }

    export default connect(mapStateToProps)(Home)

Я не понимаю, как установить данные Aws для начального состояния, которое я определяю в action.js, мой компонент всегда показывает начальное состояние, которое я определяю в index.js, и я не могу удерживать функцию рендеринга, как это исправить .

1 Ответ

1 голос
/ 12 июня 2019

Попробуйте загрузить исходные данные перед запуском приложения. Вы можете загрузить исходные данные в загрузке приложения / заставке и передать их в состояние Redux в качестве исходных. если ваше приложение сильно зависит от загрузки данных при запуске, вероятно, вы должны также обработать ошибку загрузки в заставке. Попробуйте загрузить минимальные данные при запуске приложения, иначе это может сильно повлиять на работу вашего приложения. Для получения дополнительной информации о <AppLoading> Компоненте, обратитесь к нативной документации выставки. Экспо имеет встроенный компонент <AppLoading>.

...