Skip to content

Commit b0ee8db

Browse files
theKasheytheKashey
committed
add react-redux example
1 parent 9c87cbc commit b0ee8db

11 files changed

+11315
-0
lines changed

‎examples/redux/.babelrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["env", "react"],
3+
"plugins": ["react-hot-loader/babel", "transform-class-properties", "dynamic-import-node"]
4+
}

‎examples/redux/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎examples/redux/index_csp.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Webpack App</title>
6+
<meta http-equiv="Content-Security-Policy" content="default-src http:">
7+
</head>
8+
<body>
9+
</body>
10+
</html>

‎examples/redux/package.json

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "hot-styled-components",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"scripts": {
6+
"start": "NODE_ENV=development webpack-dev-server --hot",
7+
"start:cold": "NODE_ENV=development webpack-dev-server",
8+
"start:prod": "NODE_ENV=production webpack-dev-server --hot",
9+
"start:link": "cp -R ../../dist ./node_modules/react-hot-loader && cp -R ../../*.js ./node_modules/react-hot-loader",
10+
"start:hot": "cp -R ../../../hot/react-dom/target/cjs ./node_modules/react-dom"
11+
},
12+
"devDependencies": {
13+
"babel-core": "^6.26.0",
14+
"babel-loader": "^7.1.2",
15+
"babel-plugin-transform-class-properties": "^6.24.1",
16+
"babel-preset-env": "^1.6.1",
17+
"babel-preset-react": "^6.24.1",
18+
"html-webpack-plugin": "^3.2.0",
19+
"webpack": "^4.25.1",
20+
"webpack-cli": "^3.1.2",
21+
"webpack-dev-server": "^3.1.10"
22+
},
23+
"dependencies": {
24+
"babel-polyfill": "^6.26.0",
25+
"emotion": "^8.0.12",
26+
"react": "^16.8.6",
27+
"react-dom": "^16.8.6",
28+
"react-emotion": "^9.2.12",
29+
"react-hot-loader": "^4.12.5",
30+
"react-redux": "^7.1.0",
31+
"react-spring": "^8.0.25",
32+
"redux": "^4.0.3",
33+
"styled-components": "^4.0.3"
34+
}
35+
}

‎examples/redux/src/App.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { hot } from 'react-hot-loader/root';
3+
4+
import { MyComponent } from './MyComponent';
5+
import { HookComponent } from './HookComponent';
6+
7+
const App = () => {
8+
const [state] = useState(42);
9+
const [effect, setEffect] = useState(42);
10+
11+
useEffect(() => {
12+
setEffect(effect + 1);
13+
}, []);
14+
15+
useEffect(
16+
() => {
17+
setEffect(effect + 0.1);
18+
},
19+
['hot'],
20+
);
21+
22+
return (
23+
<div>
24+
<MyComponent>
25+
test {state} : {effect}
26+
</MyComponent>
27+
<HookComponent />
28+
</div>
29+
);
30+
};
31+
32+
export default hot(App);

‎examples/redux/src/HookComponent.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { useSelector } from 'react-redux';
2+
3+
export function HookComponent() {
4+
const notifications = useSelector(() => true);
5+
6+
return null;
7+
}

‎examples/redux/src/MyComponent.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import { connect } from 'react-redux';
3+
4+
export class MyComponent1 extends React.Component {
5+
render() {
6+
return <div>{this.props.children}</div>;
7+
}
8+
}
9+
10+
export const MyComponent = connect(state => state, undefined, undefined, { pure: false })(MyComponent1);

‎examples/redux/src/index.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import 'babel-polyfill';
2+
import React from 'react';
3+
import {Provider} from 'react-redux';
4+
import {createStore, combineReducers} from 'redux';
5+
6+
import {render} from 'react-dom';
7+
import App from './App';
8+
9+
const root = document.createElement('div');
10+
document.body.appendChild(root);
11+
12+
const store =createStore(combineReducers({}));
13+
14+
render(
15+
<Provider store={store}>
16+
<App/>
17+
</Provider>
18+
, root);

‎examples/redux/webpack.config.babel.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* eslint-disable */
2+
const path = require('path');
3+
const webpack = require('webpack');
4+
const HtmlWebpackPlugin = require('html-webpack-plugin');
5+
6+
module.exports = {
7+
entry: ['./src/index'],
8+
mode: process.env.NODE_ENV || 'development',
9+
//devtool: false,
10+
output: {
11+
path: path.join(__dirname, 'dist'),
12+
filename: 'bundle.js',
13+
},
14+
module: {
15+
rules: [
16+
{
17+
exclude: /packages/, // should work without exclude
18+
test: /\.js$/,
19+
use: ['react-hot-loader/webpack', 'babel-loader'],
20+
},
21+
],
22+
},
23+
resolve: {
24+
extensions: ['.ts', '.tsx', '.js', '.jsx'],
25+
alias: {
26+
// 'react-dom': '@hot-loader/react-dom',
27+
// react: path.resolve(path.join(__dirname, './node_modules/react')),
28+
// 'react-hot-loader': path.resolve(
29+
// path.join(__dirname, './node_modules/react-hot-loader'),
30+
// ),
31+
// 'babel-core': path.resolve(
32+
// path.join(__dirname, './node_modules/@babel/core'),
33+
// ),
34+
},
35+
},
36+
plugins: [
37+
new HtmlWebpackPlugin({
38+
// uncomment this line to test RHL in "secure" env
39+
// template: "index_csp.html",
40+
}),
41+
new webpack.NamedModulesPlugin(),
42+
],
43+
};

0 commit comments

Comments
 (0)