Question

我创建了一个网站，该网站是React + Redux Serverside Render应用程序，用于加载服务器数据，我正在componentWillMount上调度一个动作，但这是一个异步请求，它从AWS加载数据，不幸的是，它需要2-3秒才能响应Google内容搜寻器不会搜寻非常需要的内容。因此，我需要采取一种方法来为Redux初始状态设置服务器数据，以便它可以打开具有完整内容的Web应用程序，但我的代码无法在此实现。

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")
    )

我的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)

我没有获得如何在action.js中定义的初始状态下设置Aws数据的信息，我的组件始终显示我在index.js上定义的初始状态，并且无法保存渲染功能，如何解决此问题

Answer 1

尝试在应用启动之前加载初始数据。您可以在应用程序加载/启动屏幕中加载初始数据，并将其作为初始数据传递到Redux状态。如果您的应用高度依赖于启动时的数据加载，则可能还应该处理启动时的加载错误。尝试在应用启动时加载最少的数据，否则可能会严重影响您的应用用户体验。有关<AppLoading>组件的更多信息，请先响应本机博览会文档。 expo内置了<AppLoading>组件。

在SSR应用程序上以Redux初始状态加载服务器数据

1 个答案: