如何在React / redux中进行服务器端渲染？
我是新的反应/ redux我有点困惑与服务器端反应在/ reax，在互联网上看到一些例子，但当我尝试与外部服务器模拟API，服务器端渲染不起作用。
cat.js
import React from 'react'; import {render} from 'react-dom'; import {connect} from 'react-redux'; import * as mockApi from '../Actions/mockActions'; class Cat extends React.Component{ componentWillMount(){ this.props.getMockApi(); } render(){ return( <div> Hello Dude {this.props.mock.data.map((data,i) => { return <li key={i}>{data.email}</li> })} </div> ) } } const mapStateToProps = (state) => { return { mock:state.mock } }; const mapDispatchToProps = (dispatch) => { return { getMockApi:() => dispatch(mockApi.getMockData()) } }; export default connect(mapStateToProps,mapDispatchToProps)(Cat); mockActions.js
import axios from 'axios'; import * as types from './actionTypes'; export function getMockData() { return dispatch => { return axios.get('http://jsonplaceholder.typicode.com/users').then(response => { dispatch(setThisData(response.data)) }) } } export function setThisData(data) { return { type:types.MOCK_API, payload:data } }
App.js
import React from 'react'; import {render} from 'react-dom'; import Cat from './components/cat' import {Provider} from 'react-redux'; import configureStore from './Store/configureStore'; import { createStore ,applyMiddleware,compose} from 'redux'; import counterApp from './Reducers' import thunk from 'redux-thunk'; if(typeof window !== 'undefined'){ // Grab the state from a global variable injected into the server-generated HTML const preloadedState = window.__PRELOADED_STATE__ // Allow the passed state to be garbage-collected delete window.__PRELOADED_STATE__ const store = createStore(counterApp, preloadedState, compose(applyMiddleware(thunk))) render( <Provider store={store} > <Cat/> </Provider> , document.getElementById('app') ) }
devServer.js
import express from 'express'; import path from 'path'; import webpack from 'webpack'; import webpackMiddleware from 'webpack-dev-middleware' import webpackHotMidleware from 'webpack-hot-middleware'; import bodyParser from 'body-parser'; import React from 'react' import { createStore } from 'redux' import { Provider } from 'react-redux'; import counterApp from '../../src/client/ReduxServer/Reducers'; import App from '../../src/client/ReduxServer/components/cat'; import { renderToString } from 'react-dom/server' import webpackConfig from '../../webpack.config.dev'; let app = express(); app.use(bodyParser.json()); app.use(express.static('public')) const compiler = webpack(webpackConfig); app.use(webpackMiddleware(compiler, { hot: true, publicPath: webpackConfig.output.publicPath, noInfo: true })); app.use(webpackHotMidleware(compiler)); // app.get('/*', (req, res) => { // res.sendFile(path.join(__dirname, '../../index.html')) // }); //Redux Start app.use(handleRender); function handleRender(req,res) { const store = createStore(counterApp); const html = renderToString( <Provider store={store} > <App/> </Provider> ) const preloadedState = store.getState(); // Send the rendered page back to the client res.send(renderFullPage(html, preloadedState)) } function renderFullPage(html, preloadedState) { console.log(preloadedState) return ` <!doctype html> <html> <head> <title>Redux Universal Example</title> </head> <body> <div id="app">${html}</div> <script> window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')} </script> <script src="bundle.js"></script> </body> </html> ` } //Redux Ends app.listen(3000, () => { console.log('Listening') });
现在，这将只有服务器呈现hello哥们，而不是模拟的Api调用数据。我知道错过了从服务器端获取数据，但重点是我会怎么做如果我要呈现一个两个组件，该组件有5个API reuqest，以及如何fecth正确的API请求
现在我的客户端完全状态将如下所示
window.__PRELOADED_STATE__ = {"mock":{"data":[]}}
好的，为了清楚起见，你已经创build了处理服务器渲染的代码。 但是，它不加载应该被提取的数据是正确的？
你已经完成了第一步，太棒了！ 下一步是将实际的dynamic数据加载到商店。 让我们看看这里的代码
function handleRender(req,res) { const store = createStore(counterApp); const html = renderToString( <Provider store={store} > <App/> </Provider> ) const preloadedState = store.getState(); // Send the rendered page back to the client res.send(renderFullPage(html, preloadedState)) }