在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。
- Socket.io io.use失败 – TypeError:io.use不是一个函数
- ExpressJS GETredirect
- 正确的方法来设置响应状态和JSON内容的REST API使用nodejs和express
- 安装MEAN栈:npm -v module.js:338 throw err; 错误:找不到模块'./cache/caching-client.js'
- 在PayPal快速结帐审批页面中缺less的项目描述和总和
- 将PDF从Amazon S3中拉出并从缓冲区/stream中直接在浏览器中呈现
- 当使用requirejs优化器时,有可能在html文件中configuration内容吗?
- 帆:我怎样才能读取Excel文件数据到JSON格式
- 我如何才能访问socket.io.min.js快递?