Skip to content

Commit 2e175af

Browse files
introvert-yintrovert-y
committed
react-redux的简单应用
1 parent 9d445a5 commit 2e175af

File tree

9 files changed

+250
-60
lines changed

9 files changed

+250
-60
lines changed

‎src/components/App.js

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎src/index.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,16 @@ import ReactDOM from 'react-dom';
33
import './index.css';
44
import AppRouter from './router/index.js';
55
import * as serviceWorker from './serviceWorker';
6+
import { createStore } from 'redux';
7+
import reducer from './page/reducer/index';
8+
import { Provider } from 'react-redux';
69

7-
ReactDOM.render( < AppRouter / > , document.getElementById('root'));
10+
const store = createStore(reducer);
11+
12+
ReactDOM.render(
13+
<Provider store={store}>
14+
< AppRouter / >
15+
</Provider> , document.getElementById('root'));
816

917
// If you want your app to work offline and load faster, you can change
1018
// unregister() to register() below. Note this comes with some pitfalls.

‎src/page/Counter/UI/index.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
3+
const Page = props => {
4+
const { value, onIncreaseClick, onDecreaseClick } = props
5+
return (
6+
<div>
7+
<h1>{value}</h1>
8+
<button onClick={onIncreaseClick}>+</button>
9+
<button onClick={onDecreaseClick}>-</button>
10+
</div>
11+
)
12+
}
13+
14+
export default Page;

‎src/page/Counter/index.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { connect } from 'react-redux';
2+
import Counter from './UI/index';
3+
4+
const mapStateToProps = (state, ownProps) => {
5+
console.log('mapStateToProps', state.count,ownProps);
6+
return {
7+
value: state.count
8+
}
9+
}
10+
11+
const mapDispatchToProps = {
12+
onIncreaseClick: () => {
13+
return {
14+
type: 'increase'
15+
}
16+
},
17+
onDecreaseClick: () => {
18+
return {
19+
type: 'decrease'
20+
}
21+
},
22+
}
23+
24+
// 容器组件
25+
// const VisibleCounter = connect(mapStateToProps, mapDispatchToProps)(Counter)
26+
27+
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

‎src/page/CssTest/index.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import style from './index.module.css'
4+
5+
// import logo from './logo.svg';s
6+
7+
const StyledDiv = styled.div`
8+
width: 300px;
9+
height: 300px;
10+
text-align: center;
11+
.red_color {
12+
color: red;
13+
}
14+
`;
15+
16+
function FancyBorder(props) {
17+
console.log(props);
18+
return (
19+
<StyledDiv>
20+
{/* styled-components作用的 */}
21+
<h1 className="red_color">test</h1>
22+
{/* App.module.css里定义的全局样式 .title 和 局部样式 .red_color */}
23+
<h2 className="title">{props.value}</h2>
24+
<button className={style.red_color} onClick={props.onClick}>加1</button>
25+
</StyledDiv>
26+
);
27+
}
28+
29+
class page extends React.Component {
30+
constructor(props) {
31+
super(props);
32+
this.state = {
33+
value: 0,
34+
};
35+
this.textInput = React.createRef();
36+
this.handleClick = this.handleClick.bind(this);
37+
this.focusTextInput = this.focusTextInput.bind(this);
38+
}
39+
componentDidMount() {
40+
this.focusTextInput();
41+
}
42+
43+
focusTextInput() {
44+
// 直接使用原生 API 使 text 输入框获得焦点
45+
// 注意：通过 "current" 取得 DOM 节点
46+
this.textInput.current.focus();
47+
}
48+
handleClick() {
49+
this.setState((prevState) => {
50+
console.log('当前的count：', prevState.value);
51+
return {value: prevState.value + 1}
52+
});
53+
}
54+
render() {
55+
return (
56+
<div>
57+
<FancyBorder value={this.state.value} onClick={this.handleClick}/>
58+
<input
59+
type="text"
60+
ref={this.textInput} />
61+
</div>
62+
)
63+
}
64+
}
65+
66+
export default page;

‎src/components/App.module.css renamed to ‎src/page/CssTest/index.module.css

File renamed without changes.

‎src/page/reducer/index.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
const reducer = (state = { count: 0 }, action) => {
3+
switch (action.type) {
4+
case 'increase':
5+
return { count: state.count + 1 }
6+
case 'decrease':
7+
return { count: state.count - 1 }
8+
default:
9+
return state
10+
}
11+
}
12+
export default reducer;

‎src/router/index.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from "react";
22
import { HashRouter ,BrowserRouter, Route, Link,Switch } from "react-router-dom";
3-
import Home from '../components/App.js'
3+
import Home from '../page/CssTest/index'
4+
import Counter from '../page/Counter/index'
5+
46

57
function App() {
68
return (
@@ -11,6 +13,7 @@ function App() {
1113
<Route exact path="/" component={Home} />
1214
<Route path="/about" component={About} />
1315
<Route path="/hasChildren" component={HasChildren} />
16+
<Route path="/counter" component={Counter} />
1417
</div>
1518

1619
</div>
@@ -68,6 +71,9 @@ function Header() {
6871
<li>
6972
<Link to="/hasChildren">HasChildren</Link>
7073
</li>
74+
<li>
75+
<Link to="/counter">Counter</Link>
76+
</li>
7177
</ul>
7278
);
7379
}

‎yarn-error.log

Lines changed: 115 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
Arguments:
2-
/usr/local/bin/node /usr/local/Cellar/yarn/1.16.0/libexec/bin/yarn.js
2+
/usr/local/bin/node /usr/local/Cellar/yarn/1.16.0/libexec/bin/yarn.js add redux
33

44
PATH:
55
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
@@ -14,23 +14,75 @@ Platform:
1414
darwin x64
1515

1616
Trace:
17-
Error: EINVAL: invalid argument, unlink '/Users/apple/Desktop/test_project/test_react_router/node_modules/@typescript-eslint/typescript-estree/node_modules/semver'
17+
Error: ENOENT: no such file or directory, copyfile '/Users/apple/Library/Caches/Yarn/v4/npm-p-limit-1.3.0-b86bd5f0c25690911c7590fcbfc2010d54b3ccb8/node_modules/p-limit/index.js' -> '/Users/apple/Desktop/github/node_modules/pkg-up/node_modules/p-limit/index.js'
1818

1919
npm manifest:
2020
{
2121
"name": "init",
2222
"version": "0.1.0",
2323
"private": true,
2424
"dependencies": {
25+
"@babel/core": "7.5.5",
26+
"@svgr/webpack": "4.3.2",
27+
"@typescript-eslint/eslint-plugin": "1.13.0",
28+
"@typescript-eslint/parser": "1.13.0",
29+
"babel-eslint": "10.0.2",
30+
"babel-jest": "^24.8.0",
31+
"babel-loader": "8.0.6",
32+
"babel-plugin-named-asset-import": "^0.3.3",
33+
"babel-preset-react-app": "^9.0.1",
34+
"camelcase": "^5.2.0",
35+
"case-sensitive-paths-webpack-plugin": "2.2.0",
36+
"css-loader": "2.1.1",
37+
"dotenv": "6.2.0",
38+
"dotenv-expand": "4.2.0",
39+
"eslint": "^6.1.0",
40+
"eslint-config-react-app": "^5.0.0",
41+
"eslint-loader": "2.2.1",
42+
"eslint-plugin-flowtype": "3.13.0",
43+
"eslint-plugin-import": "2.18.2",
44+
"eslint-plugin-jsx-a11y": "6.2.3",
45+
"eslint-plugin-react": "7.14.3",
46+
"eslint-plugin-react-hooks": "^1.6.1",
47+
"file-loader": "3.0.1",
48+
"fs-extra": "7.0.1",
49+
"html-webpack-plugin": "4.0.0-beta.5",
50+
"identity-obj-proxy": "3.0.0",
51+
"is-wsl": "^1.1.0",
52+
"jest": "24.8.0",
53+
"jest-environment-jsdom-fourteen": "0.1.0",
54+
"jest-resolve": "24.8.0",
55+
"jest-watch-typeahead": "0.3.1",
56+
"mini-css-extract-plugin": "0.5.0",
57+
"optimize-css-assets-webpack-plugin": "5.0.3",
58+
"pnp-webpack-plugin": "1.5.0",
59+
"postcss-flexbugs-fixes": "4.1.0",
60+
"postcss-loader": "3.0.0",
61+
"postcss-normalize": "7.0.1",
62+
"postcss-preset-env": "6.7.0",
63+
"postcss-safe-parser": "4.0.1",
2564
"react": "^16.9.0",
65+
"react-app-polyfill": "^1.0.2",
66+
"react-dev-utils": "^9.0.2",
2667
"react-dom": "^16.9.0",
27-
"react-scripts": "3.1.0"
68+
"resolve": "1.12.0",
69+
"resolve-url-loader": "3.1.0",
70+
"sass-loader": "7.2.0",
71+
"semver": "6.3.0",
72+
"style-loader": "1.0.0",
73+
"styled-components": "^4.3.2",
74+
"terser-webpack-plugin": "1.4.1",
75+
"ts-pnp": "1.1.2",
76+
"url-loader": "2.1.0",
77+
"webpack": "4.39.1",
78+
"webpack-dev-server": "3.2.1",
79+
"webpack-manifest-plugin": "2.0.4",
80+
"workbox-webpack-plugin": "4.3.1"
2881
},
2982
"scripts": {
30-
"start": "react-scripts start",
31-
"build": "react-scripts build",
32-
"test": "react-scripts test",
33-
"eject": "react-scripts eject"
83+
"start": "node scripts/start.js",
84+
"build": "node scripts/build.js",
85+
"test": "node scripts/test.js"
3486
},
3587
"eslintConfig": {
3688
"extends": "react-app"
@@ -46,6 +98,62 @@ npm manifest:
4698
"last 1 firefox version",
4799
"last 1 safari version"
48100
]
101+
},
102+
"jest": {
103+
"roots": [
104+
"<rootDir>/src"
105+
],
106+
"collectCoverageFrom": [
107+
"src/**/*.{js,jsx,ts,tsx}",
108+
"!src/**/*.d.ts"
109+
],
110+
"setupFiles": [
111+
"react-app-polyfill/jsdom"
112+
],
113+
"setupFilesAfterEnv": [],
114+
"testMatch": [
115+
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
116+
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
117+
],
118+
"testEnvironment": "jest-environment-jsdom-fourteen",
119+
"transform": {
120+
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
121+
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
122+
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
123+
},
124+
"transformIgnorePatterns": [
125+
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
126+
"^.+\\.module\\.(css|sass|scss)$"
127+
],
128+
"modulePaths": [],
129+
"moduleNameMapper": {
130+
"^react-native$": "react-native-web",
131+
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
132+
},
133+
"moduleFileExtensions": [
134+
"web.js",
135+
"js",
136+
"web.ts",
137+
"ts",
138+
"web.tsx",
139+
"tsx",
140+
"json",
141+
"web.jsx",
142+
"jsx",
143+
"node"
144+
],
145+
"watchPlugins": [
146+
"jest-watch-typeahead/filename",
147+
"jest-watch-typeahead/testname"
148+
]
149+
},
150+
"babel": {
151+
"presets": [
152+
"react-app"
153+
]
154+
},
155+
"devDependencies": {
156+
"react-router-dom": "^5.0.1"
49157
}
50158
}
51159

0 commit comments

Comments
 (0)