react进入路由前获取数据_reactjs – (Universal React redux react-router)如何避免在初始浏览器加载时重新获取路由数据？...

我正在通过手机输入这个,所以我为缺乏格式而道歉.

对于我的项目,我正在做与你类似的事情;我有一个静态的fetchData方法,我循环遍历renderProps中的组件,然后我调用静态方法并等待promises解析.

然后,我从我的redux商店调用get状态,对其进行字符串化,并将其传递给服务器上的渲染函数,以便它可以在客户端上渲染出初始状态对象.

从客户端,我只需抓住该初始状态变量并将其传递给我的redux商店.然后,Redux将处理使您的客户端存储与服务器上的存储匹配.从那里,您只需将您的商店转移到提供商,然后照常继续.您根本不需要在客户端上调用静态方法.

希望有所帮助！

[编辑]这是代码！

Client.js

'use strict'

import React from 'react';

import { render } from 'react-dom';

import { Provider } from 'react-redux';

import { Router, browserHistory } from 'react-router';

import createStore from '../shared/store/createStore';

import routes from '../shared/routes';

const store = createStore(window.__app_data);

const history = browserHistory;

render (

,

document.getElementById('content')

)

Server.js

app.use((req, res, next) => {

match({ routes, location:req.url }, (err, redirectLocation, renderProps) => {

if (err) {

return res.status(500).send(err);

}

if (redirectLocation) {

return res.redirect(302, redirectLocation.pathname + redirectLocation.search);

}

if (!renderProps) {

return next();

}

// Create the redux store.

const store = createStore();

// Retrieve the promises from React Router components that have a fetchData method.

// We use this data to populate our store for server side rendering.

const fetchedData = renderProps.components

.filter(component => component.fetchData)

.map(component => component.fetchData(store, renderProps.params));

// Wait until ALL promises are successful before rendering.

Promise.all(fetchedData)

.then(() => {

const asset = {

javascript: {

main: '/js/bundle.js'

}

};

const appContent = renderToString(

)

const isProd = process.env.NODE_ENV !== 'production' ? false : true;

res.send('' + renderToStaticMarkup(

));

})

.catch((err) => {

// TODO: Perform better error logging.

console.log(err);

});

});

});

RedditContainer.js

class Reddit extends Component {

// Used by the server, ONLY, to fetch data

static fetchData(store) {

const { selectedSubreddit } = store.getState();

return store.dispatch(fetchPosts(selectedSubreddit));

}

// This will be called once on the client

componentDidMount() {

const { dispatch, selectedSubreddit } = this.props;

dispatch(fetchPostsIfNeeded(selectedSubreddit));

}

... Other methods

};

HTML.js

'use strict';

import React, { Component, PropTypes } from 'react';

import ReactDom from 'react-dom';

import Helmet from 'react-helmet';

import serialize from 'serialize-javascript';

export default class Layout extends Component {

static propTypes = {

assets: PropTypes.object,

content: PropTypes.string,

store: PropTypes.object,

isProd: PropTypes.bool

}

render () {

const { assets, content, store, isProd } = this.props;

const head = Helmet.rewind();

const attrs = head.htmlAttributes.toComponent();

return (

{head.base.toComponent()}

{head.title.toComponent()}

{head.meta.toComponent()}

{head.link.toComponent()}

{head.script.toComponent()}

);

}

};

重申……

>在客户端上,获取状态变量并将其传递给您的商店.>在服务器上,遍历组件,调用fetchData并传递商店.等待承诺得到解决,然后渲染.>在HTML.js(您的renderView函数)中,序列化您的Redux存储并将输出呈现为客户端的javascript变量.>在React组件中,仅为要调用的服务器创建静态fetchData方法.发送您需要的操作.