在NodeJS服务器(我正在使用react-router)的同构react-redux应用程序中设置存储的初始状态,

我正在尝试从NodeJS服务器设置我的redux商店的初始状态。 我不确定我错过了什么,以及如何使其工作。

这是我的server.js

const express = require('express'); const path = require('path'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); const webpackHotServerMiddleware = require('webpack-hot-server-middleware'); const config = require('./webpack/webpack.development.config.js'); const compiler = webpack(config); const app = express(); app.use(webpackHotMiddleware(compiler.compilers.find( compiler => compiler.name === 'client' ))); app.use(webpackHotServerMiddleware(compiler)); app.listen(3000); 

这是我的webpack.development.config

 const path = require('path'); module.exports = [ { name: 'client', target: 'web', entry: './routes/client.jsx', output: { path: path.join(__dirname, 'assets'), filename: 'client.js', publicPath: '/assets/', }, resolve: { extensions: ['.js', '.jsx'] }, devtool: 'source-map', module: { rules: [ { test: /\.(js|jsx)$/, exclude: /(node_modules\/)/, use: [ { loader: 'babel-loader', } ] }, { test: /\.scss$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: '[name]__[local]___[hash:base64:5]', sourceMap: true } }, { loader: 'sass-loader' } ] }, { test: /\.html$/, loader: "html-loader" } ], }, }, ]; 

PS,相同的模块在服务器上,但我已经删除了,以保持它的简短。

这是client.jsx

 import React from 'react'; import { createStore } from 'redux' import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import Routes from './routes.jsx'; import { Provider } from 'react-redux'; import MainStore from '../views/store/MainStore'; import home from './home'; const store = createStore(MainStore, "Name"); ReactDOM.render(( <Provider store={store}> <BrowserRouter> <Routes /> </BrowserRouter> </Provider> ), document.getElementById('root')); 

最后是我的home.jsx

 const express = require('express'); const path = require('path'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); const webpackHotServerMiddleware = require('webpack-hot-server-middleware'); const config = require('../webpack/webpack.development.config.js'); const router = express(); router.get('/test', (req, res) => { res.json({ message: "I'm just testing to see if this works" }); }); const name = "Mona"; module.exports = { router: router, name: name, }; 

我想将常量名称从home.jsx导入到client.jsx中,并将商店的初始值设置为此导入的值。 我可以通过线路手动执行

 const store = createStore(MainStore, "Name"); 

在client.jsx中。 但是,而不是使用“名称”作为string,我想用home.jsx中的常量值来代替它。

有什么build议么?

在一个同构的react-reduce应用程序中设置商店的初始状态

假定任务的典型解决scheme是使用预加载状态,这个状态是在SSR阶段计算出来的,并作为序列化的信息字段注入呈现的HTML模板中。 你也可以创build专用的资源,如/api/initialState.js ,它为你的视图模型创build初始状态,依赖于客户端的请求,也可能是JWT的凭据。

您可以在resolve-scripts npm软件包中看到类似的解决scheme,该软件为服务器上的redux(包括SSR)提供了全自动同构存储function。