├── .gitignore
├── Dockerfile
├── README.md
├── index.html
├── index.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | bundle.js
4 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | from node
2 | add . /source
3 | workdir /source
4 | run npm i
5 | cmd npm start
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](http://standardjs.com/)
2 |
3 | For beginners like me to learn the concepts in [Redux](https://github.com/reactjs/redux)
4 |
5 | To run this example:
6 |
7 | 1. [Download this repo](https://github.com/jackielii/simplest-redux-example/archive/master.zip) or `git clone https://github.com/jackielii/simplest-redux-example.git`
8 | 2. From the repo folder run:
9 | `npm install`
10 | 3. `npm start`
11 | 4. open [http://localhost:8000/](http://localhost:8000/) in the browser
12 |
13 | And also head over to http://redux.js.org/ for some great documentation.
14 |
15 | There is also a [webpack](https://github.com/jackielii/simplest-redux-example/tree/webpack) and an [ES5](https://github.com/jackielii/simplest-redux-example/tree/es5) example.
16 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Simplest redux + react example
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import PropTypes from 'prop-types'
3 | import ReactDOM from 'react-dom'
4 | import { createStore } from 'redux'
5 | import { Provider, connect } from 'react-redux'
6 |
7 | // React component
8 | class Counter extends Component {
9 | render() {
10 | const { value, onIncreaseClick } = this.props
11 | return (
12 |
13 | {value}
14 |
15 |
16 | )
17 | }
18 | }
19 |
20 | Counter.propTypes = {
21 | value: PropTypes.number.isRequired,
22 | onIncreaseClick: PropTypes.func.isRequired
23 | }
24 |
25 | // Action
26 | const increaseAction = { type: 'increase' }
27 |
28 | // Reducer
29 | function counter(state = { count: 0 }, action) {
30 | const count = state.count
31 | switch (action.type) {
32 | case 'increase':
33 | return { count: count + 1 }
34 | default:
35 | return state
36 | }
37 | }
38 |
39 | // Store
40 | const store = createStore(counter)
41 |
42 | // Map Redux state to component props
43 | function mapStateToProps(state) {
44 | return {
45 | value: state.count
46 | }
47 | }
48 |
49 | // Map Redux actions to component props
50 | function mapDispatchToProps(dispatch) {
51 | return {
52 | onIncreaseClick: () => dispatch(increaseAction)
53 | }
54 | }
55 |
56 | // Connected Component
57 | const App = connect(
58 | mapStateToProps,
59 | mapDispatchToProps
60 | )(Counter)
61 |
62 | ReactDOM.render(
63 |
64 |
65 | ,
66 | document.getElementById('root')
67 | )
68 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "simplest-redux-example",
3 | "version": "0.0.0",
4 | "description": "simplest redux + react example",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "browserify --debug --extension=js -o bundle.js index.js && http-server -p 8000"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/jackielii/simplest-redux-example.git"
12 | },
13 | "keywords": [
14 | "redux",
15 | "react"
16 | ],
17 | "author": "Jackie Li",
18 | "license": "ISC",
19 | "bugs": {
20 | "url": "https://github.com/jackielii/simplest-redux-example/issues"
21 | },
22 | "browserify": {
23 | "transform": [
24 | [ "babelify", { "presets": ["es2015", "react"] } ]
25 | ]
26 | },
27 | "homepage": "https://github.com/jackielii/simplest-redux-example#readme",
28 | "dependencies": {
29 | "prop-types": "^15.5.10",
30 | "react": "^15.0.2",
31 | "react-dom": "^15.0.2",
32 | "react-redux": "^4.4.5",
33 | "redux": "^3.5.2"
34 | },
35 | "devDependencies": {
36 | "babel-preset-es2015": "^6.6.0",
37 | "babel-preset-react": "^6.5.0",
38 | "babelify": "^7.3.0",
39 | "browserify": "^13.0.1",
40 | "http-server": "^0.9.0"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------