Question

我正在尝试从NodeJS服务器设置我的redux存储的initialState。我不确定我错过了什么，以及如何让它工作。

这是我的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中的const名称导入client.jsx，并将商店的初始值设置为此导入值。我可以通过线

手动完成

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

在client.jsx中

。但是我不想将“Name”用作字符串，而是将其替换为home.jsx中的常量值。

有什么建议吗？

Answer 1

在同构react-redux app中设置商店的初始状态

假设任务的典型解决方案是使用预加载状态，该状态已在SSR阶段计算并在呈现的HTML模板中作为序列化信息字段注入。您还可以创建专用资源，例如/api/initialState.js，它可以为您的视图模型创建初始状态，具体取决于客户端请求以及JWT凭据。

您可以在resolve-scripts npm package中看到类似的解决方案，它可以为服务器上的redux提供全自动同构存储，包括SSR。

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

1 个答案: