Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 54e4e36

Browse files
author
vinogradov
committed
add one-file redux example, update dependencies
1 parent 8f2d62d commit 54e4e36

File tree

12 files changed

+596
-405
lines changed

12 files changed

+596
-405
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[See in action](https://vinogradov.github.io/react-starter-kit)
22

3-
Includes only the latest and greatest web technologies (dependencies updated at May 15 2017). Use it for your next heroic SPA project because you can't go wrong with it. Contains minimal viable "hello, world" code just to proof it works. Remove hello world and write your own great project.
3+
Includes only the latest and greatest web technologies (dependencies updated at May 30 2017). Use it for your next heroic SPA project because you can't go wrong with it. Contains minimal viable "hello, world" code just to proof it works. Remove hello world and write your own great project.
44

55
# Principles
66
1. Use plain [ES2015](https://babeljs.io/docs/plugins/preset-es2015/)/[16](https://babeljs.io/docs/plugins/preset-es2016/)/[17](https://babeljs.io/docs/plugins/preset-es2017/). Minimize use of [experimental Stage-X](https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-) javascript features. Only [stage-3](https://babeljs.io/docs/plugins/preset-stage-3/)/4 features are supported, because they're relatively stable

‎__mocks__/fileMock.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = 'path-to-file';
1+
module.exports = '';

‎package.json

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,41 +12,41 @@
1212
"license": "MIT",
1313
"dependencies": {
1414
"babel-core": "6.24.1",
15-
"babel-jest": "20.0.1",
15+
"babel-jest": "20.0.3",
1616
"babel-loader": "7.0.0",
1717
"babel-plugin-transform-object-rest-spread": "6.23.0",
1818
"babel-preset-es2015": "6.24.1",
1919
"babel-preset-es2016": "6.24.1",
2020
"babel-preset-es2017": "6.24.1",
2121
"babel-preset-react": "6.24.1",
2222
"clean-webpack-plugin": "0.1.16",
23-
"css-loader": "0.28.1",
23+
"css-loader": "0.28.4",
2424
"eslint": "3.19.0",
25-
"eslint-config-airbnb": "14.1.0",
25+
"eslint-config-airbnb": "15.0.1",
2626
"eslint-loader": "1.7.1",
27-
"eslint-plugin-import": "2.2.0",
28-
"eslint-plugin-jest": "20.0.1",
29-
"eslint-plugin-jsx-a11y": "4.0.0",
27+
"eslint-plugin-import": "2.3.0",
28+
"eslint-plugin-jest": "20.0.3",
29+
"eslint-plugin-jsx-a11y": "5.0.3",
3030
"eslint-plugin-react": "7.0.1",
3131
"extract-text-webpack-plugin": "2.1.0",
3232
"file-loader": "0.11.1",
3333
"html-webpack-plugin": "2.28.0",
3434
"isomorphic-fetch": "2.2.1",
35-
"jest": "20.0.1",
36-
"node-sass": "4.5.2",
35+
"jest": "20.0.4",
36+
"node-sass": "4.5.3",
3737
"prop-types": "15.5.10",
3838
"react": "15.5.4",
3939
"react-dom": "15.5.4",
40-
"react-redux": "5.0.4",
40+
"react-redux": "5.0.5",
4141
"react-router-dom": "4.1.1",
4242
"react-test-renderer": "15.5.4",
4343
"redux": "3.6.0",
44-
"redux-logger": "3.0.1",
44+
"redux-logger": "3.0.6",
4545
"redux-saga": "0.15.3",
4646
"redux-thunk": "2.2.0",
4747
"sass-loader": "6.0.5",
48-
"style-loader": "0.17.0",
49-
"webpack": "2.5.1"
48+
"style-loader": "0.18.1",
49+
"webpack": "2.6.1"
5050
},
5151
"devDependencies": {
5252
"webpack-dev-server": "2.4.5"

‎src/entry.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ import 'file-loader?name=[name].[ext]!./favicon.ico';
33
/* eslint-enable */
44

55
import './examples/react/index';
6-
// import './examples/redux';
6+
// import './examples/redux/one-file';
7+
// import './examples/redux/separate-files';

‎src/examples/redux/one-file/index.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
import {Provider, connect} from 'react-redux';
4+
import PropTypes from 'prop-types';
5+
import {createStore, applyMiddleware} from 'redux';
6+
import logger from 'redux-logger';
7+
8+
9+
// ACTIONS:
10+
11+
const INCREMENT_ACTION = 'INCREMENT_ACTION';
12+
function incrementAction() {
13+
return {
14+
type: INCREMENT_ACTION
15+
};
16+
}
17+
18+
const DECREMENT_ACTION = 'DECREMENT_ACTION';
19+
function decrementAction() {
20+
return {
21+
type: DECREMENT_ACTION
22+
};
23+
}
24+
25+
// REDUCERS:
26+
27+
const INITIAL_STATE = 2;
28+
29+
function rootReducer(state = INITIAL_STATE, action) {
30+
const STEP = 1;
31+
32+
switch (action.type) {
33+
case INCREMENT_ACTION:
34+
return state + STEP;
35+
case DECREMENT_ACTION:
36+
return state - STEP;
37+
default:
38+
return state;
39+
}
40+
}
41+
42+
// COMPONENTS:
43+
44+
class Counter$ extends React.Component {
45+
constructor(props) {
46+
super(props);
47+
this.onIncrementHandler = this.onIncrementHandler.bind(this);
48+
this.onDecrementHandler = this.onDecrementHandler.bind(this);
49+
}
50+
51+
onIncrementHandler() {
52+
this.props.dispatch(incrementAction());
53+
}
54+
55+
onDecrementHandler() {
56+
this.props.dispatch(decrementAction());
57+
}
58+
59+
render() {
60+
return (
61+
<div>
62+
<div>{this.props.counter}</div>
63+
<button onClick={this.onIncrementHandler}>increment</button>
64+
<button onClick={this.onDecrementHandler}>decrement</button>
65+
</div>
66+
);
67+
}
68+
}
69+
70+
Counter$.propTypes = {
71+
dispatch: PropTypes.func.isRequired,
72+
counter: PropTypes.number.isRequired
73+
};
74+
75+
const Counter = connect(state => ({
76+
counter: state
77+
}))(Counter$);
78+
79+
const store = createStore(
80+
rootReducer,
81+
applyMiddleware(logger)
82+
);
83+
84+
ReactDOM.render(
85+
<Provider store={store}>
86+
<Counter />
87+
</Provider>,
88+
document.querySelector('#app')
89+
);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /