Isomorphic Redux 项目教程

Isomorphic Redux 项目教程

isomorphic-reduxIsomorphic Redux demo, with routing and async actions项目地址:https://gitcode.com/gh_mirrors/is/isomorphic-redux

1. 项目的目录结构及介绍

isomorphic-redux/
├── client/
│   ├── actions/
│   ├── components/
│   ├── containers/
│   ├── reducers/
│   ├── store/
│   └── index.js
├── server/
│   ├── middleware/
│   ├── routes/
│   ├── server.js
│   └── index.js
├── shared/
│   ├── actions/
│   ├── components/
│   ├── reducers/
│   └── store/
├── config/
│   ├── default.js
│   ├── development.js
│   └── production.js
├── package.json
└── README.md

• client/: 客户端代码，包含React组件、Redux actions、reducers等。
• server/: 服务器端代码，包含Express服务器配置、路由等。
• shared/: 共享代码，包含可以在客户端和服务器端共享的组件和逻辑。
• config/: 配置文件，包含不同环境的配置。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

客户端启动文件

client/index.js 是客户端的入口文件，负责初始化React应用和Redux store。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import App from './containers/App';

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

服务器端启动文件

server/server.js 是服务器端的入口文件，负责启动Express服务器并处理请求。

const express = require('express');
const path = require('path');
const app = express();
const isDev = process.env.NODE_ENV !== 'production';

if (isDev) {
  const webpack = require('webpack');
  const config = require('../webpack.config.js');
  const compiler = webpack(config);
  app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
  }));
  app.use(require('webpack-hot-middleware')(compiler));
} else {
  app.use(express.static(path.join(__dirname, '..', 'dist')));
}

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '..', 'dist', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

3. 项目的配置文件介绍

config/ 目录下包含不同环境的配置文件。

默认配置

config/default.js 包含默认配置，适用于所有环境。

module.exports = {
  port: 3000,
  apiEndpoint: 'http://localhost:3000/api'
};

开发环境配置

config/development.js 包含开发环境的特定配置。

module.exports = {
  debug: true,
  logLevel: 'debug'
};

生产环境配置

config/production.js 包含生产环境的特定配置。

module.exports = {
  debug: false,
  logLevel: 'error'
};

这些配置文件可以通过环境变量加载，确保应用在不同环境下运行时使用正确的配置。

isomorphic-reduxIsomorphic Redux demo, with routing and async actions项目地址:https://gitcode.com/gh_mirrors/is/isomorphic-redux