14 |
18 | )
19 | }
20 | }
21 | ```
22 |
23 | These `12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.
15 | You will also see any lint errors in the console. 16 | 17 | ### `npm run build` 18 | 19 | Builds the app for production to the `build` folder.
20 | It correctly bundles React in production mode and optimizes the build for the best performance. 21 | 22 | The build is minified and the filenames include the hashes.
23 | Your app is ready to be deployed! 24 | 25 | ### `npm run eject` 26 | 27 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 28 | 29 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 30 | 31 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 32 | 33 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 34 | 35 | -------------------------------------------------------------------------------- /examples/async/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "async", 3 | "version": "0.0.1", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "^0.6.0", 7 | "redux-logger": "^2.6.1" 8 | }, 9 | "dependencies": { 10 | "react": "^15.3.0", 11 | "react-dom": "^15.3.0", 12 | "react-redux": "^4.4.5", 13 | "redux": "^3.5.2", 14 | "redux-thunk": "^2.1.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "./node_modules/react-scripts/config/eslint.js" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/async/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
{value}
6 | 14 | 15 | ) 16 | 17 | Picker.propTypes = { 18 | options: PropTypes.arrayOf( 19 | PropTypes.string.isRequired 20 | ).isRequired, 21 | value: PropTypes.string.isRequired, 22 | onChange: PropTypes.func.isRequired 23 | } 24 | 25 | export default Picker 26 | -------------------------------------------------------------------------------- /examples/async/src/components/Posts.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react' 2 | 3 | const Posts = ({posts}) => ( 4 |-
5 | {posts.map((post, i) =>
6 |
- {post.title} 7 | )} 8 |
45 |
69 | )
70 | }
71 | }
72 |
73 | const mapStateToProps = state => {
74 | const { selectedReddit, postsByReddit } = state
75 | const {
76 | isFetching,
77 | lastUpdated,
78 | items: posts
79 | } = postsByReddit[selectedReddit] || {
80 | isFetching: true,
81 | items: []
82 | }
83 |
84 | return {
85 | selectedReddit,
86 | posts,
87 | isFetching,
88 | lastUpdated
89 | }
90 | }
91 |
92 | export default connect(mapStateToProps)(App)
93 |
--------------------------------------------------------------------------------
/examples/async/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 | import { createStore, applyMiddleware } from 'redux'
4 | import { Provider } from 'react-redux'
5 | import thunk from 'redux-thunk'
6 | import createLogger from 'redux-logger'
7 | import reducer from './reducers'
8 | import App from './containers/App'
9 |
10 | const middleware = [ thunk ]
11 | if (process.env.NODE_ENV !== 'production') {
12 | middleware.push(createLogger())
13 | }
14 |
15 | const store = createStore(
16 | reducer,
17 | applyMiddleware(...middleware)
18 | )
19 |
20 | render(
21 | 49 | {lastUpdated && 50 | 51 | Last updated at {new Date(lastUpdated).toLocaleTimeString()}. 52 | {' '} 53 | 54 | } 55 | {!isFetching && 56 | 58 | Refresh 59 | 60 | } 61 |
62 | {isEmpty 63 | ? (isFetching ?Loading...
:Empty.
) 64 | :
65 |
67 | }
68 |
9 |
17 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/examples/counter/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 |
6 | # production
7 | build
8 |
9 | # misc
10 | .DS_Store
11 | npm-debug.log
12 |
--------------------------------------------------------------------------------
/examples/counter/README.md:
--------------------------------------------------------------------------------
1 | # Redux Counter Example
2 |
3 | This project template was built with [Create React App](https://github.com/facebookincubator/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm start`
10 |
11 | Runs the app in the development mode.10 | Clicked: 0 times 11 | 12 | 13 | 14 | 15 |
16 |12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.
15 | You will also see any lint errors in the console. 16 | 17 | ### `npm run build` 18 | 19 | Builds the app for production to the `build` folder.
20 | It correctly bundles React in production mode and optimizes the build for the best performance. 21 | 22 | The build is minified and the filenames include the hashes.
23 | Your app is ready to be deployed! 24 | 25 | ### `npm run eject` 26 | 27 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 28 | 29 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 30 | 31 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 32 | 33 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 34 | -------------------------------------------------------------------------------- /examples/counter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "counter", 3 | "version": "0.0.1", 4 | "private": true, 5 | "devDependencies": { 6 | "enzyme": "^2.4.1", 7 | "react-addons-test-utils": "^15.3.0", 8 | "react-scripts": "^0.6.0" 9 | }, 10 | "dependencies": { 11 | "react": "^15.3.0", 12 | "react-dom": "^15.3.0", 13 | "react-redux": "^4.4.5", 14 | "redux": "^3.5.2" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "eject": "react-scripts eject", 20 | "test": "react-scripts test" 21 | }, 22 | "eslintConfig": { 23 | "extends": "./node_modules/react-scripts/config/eslint.js" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/counter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
24 | Clicked: {value} times 25 | {' '} 26 | 29 | {' '} 30 | 33 | {' '} 34 | 37 | {' '} 38 | 41 |
42 | ) 43 | } 44 | } 45 | 46 | export default Counter 47 | -------------------------------------------------------------------------------- /examples/counter/src/components/Counter.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { shallow } from 'enzyme' 3 | import Counter from './Counter' 4 | 5 | function setup(value = 0) { 6 | const actions = { 7 | onIncrement: jest.fn(), 8 | onDecrement: jest.fn() 9 | } 10 | const component = shallow( 11 |12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.
15 | You will also see any lint errors in the console. 16 | 17 | ### `npm run build` 18 | 19 | Builds the app for production to the `build` folder.
20 | It correctly bundles React in production mode and optimizes the build for the best performance. 21 | 22 | The build is minified and the filenames include the hashes.
23 | Your app is ready to be deployed! 24 | 25 | ### `npm run eject` 26 | 27 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 28 | 29 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 30 | 31 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 32 | 33 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 34 | -------------------------------------------------------------------------------- /examples/real-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "real-world", 3 | "version": "0.0.1", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "^0.6.0", 7 | "redux-devtools": "^3.3.1", 8 | "redux-devtools-dock-monitor": "^1.1.1", 9 | "redux-devtools-log-monitor": "^1.0.11", 10 | "redux-logger": "^2.6.1" 11 | }, 12 | "dependencies": { 13 | "humps": "^1.1.0", 14 | "lodash": "^4.16.1", 15 | "normalizr": "^2.2.1", 16 | "react": "^15.3.0", 17 | "react-dom": "^15.3.0", 18 | "react-redux": "^4.4.5", 19 | "react-router": "^2.6.1", 20 | "react-router-redux": "^4.0.5", 21 | "redux": "^3.5.2", 22 | "redux-thunk": "^2.1.0" 23 | }, 24 | "scripts": { 25 | "start": "react-scripts start", 26 | "build": "react-scripts build", 27 | "eject": "react-scripts eject" 28 | }, 29 | "eslintConfig": { 30 | "extends": "./node_modules/react-scripts/config/eslint.js" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/real-world/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
41 |
56 | )
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/examples/real-world/src/components/List.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 |
3 | export default class List extends Component {
4 | static propTypes = {
5 | loadingLabel: PropTypes.string.isRequired,
6 | pageCount: PropTypes.number,
7 | renderItem: PropTypes.func.isRequired,
8 | items: PropTypes.array.isRequired,
9 | isFetching: PropTypes.bool.isRequired,
10 | onLoadMoreClick: PropTypes.func.isRequired,
11 | nextPageUrl: PropTypes.string
12 | }
13 |
14 | static defaultProps = {
15 | isFetching: true,
16 | loadingLabel: 'Loading...'
17 | }
18 |
19 | renderLoadMore() {
20 | const { isFetching, onLoadMoreClick } = this.props
21 | return (
22 |
27 | )
28 | }
29 |
30 | render() {
31 | const {
32 | isFetching, nextPageUrl, pageCount,
33 | items, renderItem, loadingLabel
34 | } = this.props
35 |
36 | const isEmpty = items.length === 0
37 | if (isEmpty && isFetching) {
38 | return Type a username or repo full name and hit 'Go':
42 | 46 | 49 |50 | Code on Github. 51 |
52 |53 | Move the DevTools with Ctrl+W or hide them with Ctrl+H. 54 |
55 |{loadingLabel}
39 | } 40 | 41 | const isLastPage = !nextPageUrl 42 | if (isEmpty && isLastPage) { 43 | returnNothing here!
44 | } 45 | 46 | return ( 47 |
48 | {items.map(renderItem)}
49 | {pageCount > 0 && !isLastPage && this.renderLoadMore()}
50 |
51 | )
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/examples/real-world/src/components/Repo.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react'
2 | import { Link } from 'react-router'
3 |
4 | const Repo = ({ repo, owner }) => {
5 | const { login } = owner
6 | const { name, description } = repo
7 |
8 | return (
9 |
10 |
23 | )
24 | }
25 |
26 | Repo.propTypes = {
27 | repo: PropTypes.shape({
28 | name: PropTypes.string.isRequired,
29 | description: PropTypes.string
30 | }).isRequired,
31 | owner: PropTypes.shape({
32 | login: PropTypes.string.isRequired
33 | }).isRequired
34 | }
35 |
36 | export default Repo
37 |
--------------------------------------------------------------------------------
/examples/real-world/src/components/User.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react'
2 | import { Link } from 'react-router'
3 |
4 | const User = ({ user }) => {
5 | const { login, avatarUrl, name } = user
6 |
7 | return (
8 | 11 | 12 | {name} 13 | 14 | {' by '} 15 | 16 | {login} 17 | 18 |
19 | {description && 20 |{description}
21 | } 22 |
9 |
10 | 
11 |
16 | )
17 | }
18 |
19 | User.propTypes = {
20 | user: PropTypes.shape({
21 | login: PropTypes.string.isRequired,
22 | avatarUrl: PropTypes.string.isRequired,
23 | name: PropTypes.string
24 | }).isRequired
25 | }
26 |
27 | export default User
28 |
--------------------------------------------------------------------------------
/examples/real-world/src/containers/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { connect } from 'react-redux'
3 | import { browserHistory } from 'react-router'
4 | import Explore from '../components/Explore'
5 | import { resetErrorMessage } from '../actions'
6 |
7 | class App extends Component {
8 | static propTypes = {
9 | // Injected by React Redux
10 | errorMessage: PropTypes.string,
11 | resetErrorMessage: PropTypes.func.isRequired,
12 | inputValue: PropTypes.string.isRequired,
13 | // Injected by React Router
14 | children: PropTypes.node
15 | }
16 |
17 | handleDismissClick = e => {
18 | this.props.resetErrorMessage()
19 | e.preventDefault()
20 | }
21 |
22 | handleChange = nextValue => {
23 | browserHistory.push(`/${nextValue}`)
24 | }
25 |
26 | renderErrorMessage() {
27 | const { errorMessage } = this.props
28 | if (!errorMessage) {
29 | return null
30 | }
31 |
32 | return (
33 | 12 | {login} {name && ({name})} 13 |
14 | 15 |34 | {errorMessage} 35 | {' '} 36 | ( 38 | Dismiss 39 | ) 40 |
41 | ) 42 | } 43 | 44 | render() { 45 | const { children, inputValue } = this.props 46 | return ( 47 |
48 |
51 | {this.renderErrorMessage()} 52 | {children} 53 |
54 | )
55 | }
56 | }
57 |
58 | const mapStateToProps = (state, ownProps) => ({
59 | errorMessage: state.errorMessage,
60 | inputValue: ownProps.location.pathname.substring(1)
61 | })
62 |
63 | export default connect(mapStateToProps, {
64 | resetErrorMessage
65 | })(App)
66 |
--------------------------------------------------------------------------------
/examples/real-world/src/containers/DevTools.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { createDevTools } from 'redux-devtools'
3 | import LogMonitor from 'redux-devtools-log-monitor'
4 | import DockMonitor from 'redux-devtools-dock-monitor'
5 |
6 | export default createDevTools(
7 | 51 | {this.renderErrorMessage()} 52 | {children} 53 |
10 |
13 | 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.
15 | You will also see any lint errors in the console. 16 | 17 | ### `npm run build` 18 | 19 | Builds the app for production to the `build` folder.
20 | It correctly bundles React in production mode and optimizes the build for the best performance. 21 | 22 | The build is minified and the filenames include the hashes.
23 | Your app is ready to be deployed! 24 | 25 | ### `npm run eject` 26 | 27 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 28 | 29 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 30 | 31 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 32 | 33 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 34 | -------------------------------------------------------------------------------- /examples/shopping-cart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shopping-cart", 3 | "version": "0.0.1", 4 | "private": true, 5 | "devDependencies": { 6 | "enzyme": "^2.4.1", 7 | "react-addons-test-utils": "^15.3.0", 8 | "react-scripts": "^0.6.0" 9 | }, 10 | "dependencies": { 11 | "react": "^15.3.0", 12 | "react-dom": "^15.3.0", 13 | "react-redux": "^4.4.5", 14 | "redux": "^3.5.2", 15 | "redux-logger": "^2.6.1", 16 | "redux-thunk": "^2.1.0" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "eject": "react-scripts eject", 22 | "test": "react-scripts test" 23 | }, 24 | "eslintConfig": { 25 | "extends": "./node_modules/react-scripts/config/eslint.js" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/shopping-cart/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
21 |
29 | )
30 | }
31 |
32 | Cart.propTypes = {
33 | products: PropTypes.array,
34 | total: PropTypes.string,
35 | onCheckoutClicked: PropTypes.func
36 | }
37 |
38 | export default Cart
39 |
--------------------------------------------------------------------------------
/examples/shopping-cart/src/components/Cart.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import Cart from './Cart'
4 | import Product from './Product'
5 |
6 | const setup = (total, products = []) => {
7 | const actions = {
8 | onCheckoutClicked: jest.fn()
9 | }
10 |
11 | const component = shallow(
12 | Your Cart
22 |{nodes}
23 | Total: ${total}
24 | 28 |
5 | {title} - ${price}{quantity ? ` x ${quantity}` : null}
6 |
7 | )
8 |
9 | Product.propTypes = {
10 | price: PropTypes.number,
11 | quantity: PropTypes.number,
12 | title: PropTypes.string
13 | }
14 |
15 | export default Product
16 |
--------------------------------------------------------------------------------
/examples/shopping-cart/src/components/Product.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import Product from './Product'
4 |
5 | const setup = props => {
6 | const component = shallow(
7 |
6 |
15 | )
16 |
17 | ProductItem.propTypes = {
18 | product: PropTypes.shape({
19 | title: PropTypes.string.isRequired,
20 | price: PropTypes.number.isRequired,
21 | inventory: PropTypes.number.isRequired
22 | }).isRequired,
23 | onAddToCartClicked: PropTypes.func.isRequired
24 | }
25 |
26 | export default ProductItem
27 |
--------------------------------------------------------------------------------
/examples/shopping-cart/src/components/ProductItem.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import Product from './Product'
4 | import ProductItem from './ProductItem'
5 |
6 | const setup = product => {
7 | const actions = {
8 | onAddToCartClicked: jest.fn()
9 | }
10 |
11 | const component = shallow(
12 |
5 |
8 | )
9 |
10 | ProductsList.propTypes = {
11 | children: PropTypes.node,
12 | title: PropTypes.string.isRequired
13 | }
14 |
15 | export default ProductsList
16 |
--------------------------------------------------------------------------------
/examples/shopping-cart/src/components/ProductsList.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import ProductsList from './ProductsList'
4 |
5 | const setup = props => {
6 | const component = shallow(
7 | {title}
6 |{children}
7 |
7 |
9 |
11 |
13 | )
14 |
15 | export default App
16 |
--------------------------------------------------------------------------------
/examples/shopping-cart/src/containers/CartContainer.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react'
2 | import { connect } from 'react-redux'
3 | import { checkout } from '../actions'
4 | import { getTotal, getCartProducts } from '../reducers'
5 | import Cart from '../components/Cart'
6 |
7 | const CartContainer = ({ products, total, checkout }) => (
8 | Shopping Cart Example
8 |9 |
11 |
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.
15 | You will also see any lint errors in the console. 16 | 17 | ### `npm run build` 18 | 19 | Builds the app for production to the `build` folder.
20 | It correctly bundles React in production mode and optimizes the build for the best performance. 21 | 22 | The build is minified and the filenames include the hashes.
23 | Your app is ready to be deployed! 24 | 25 | ### `npm run eject` 26 | 27 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 28 | 29 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 30 | 31 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 32 | 33 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 34 | -------------------------------------------------------------------------------- /examples/todomvc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todomvc", 3 | "version": "0.0.1", 4 | "private": true, 5 | "devDependencies": { 6 | "enzyme": "^2.4.1", 7 | "react-addons-test-utils": "^15.3.0", 8 | "react-scripts": "^0.6.0" 9 | }, 10 | "dependencies": { 11 | "classnames": "^2.2.5", 12 | "react": "^15.3.0", 13 | "react-dom": "^15.3.0", 14 | "react-redux": "^4.4.5", 15 | "redux": "^3.5.2", 16 | "todomvc-app-css": "^2.0.6" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "eject": "react-scripts eject", 22 | "test": "react-scripts test" 23 | }, 24 | "eslintConfig": { 25 | "extends": "./node_modules/react-scripts/config/eslint.js" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/todomvc/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
todos
19 |-
70 | {filteredTodos.map(todo =>
71 |
43 | completeTodo(todo.id)} />
47 |
50 |
53 | )
54 | }
55 |
56 | return (
57 |
10 |
13 | )
14 |
15 | App.propTypes = {
16 | todos: PropTypes.array.isRequired,
17 | actions: PropTypes.object.isRequired
18 | }
19 |
20 | const mapStateToProps = state => ({
21 | todos: state.todos
22 | })
23 |
24 | const mapDispatchToProps = dispatch => ({
25 | actions: bindActionCreators(TodoActions, dispatch)
26 | })
27 |
28 | export default connect(
29 | mapStateToProps,
30 | mapDispatchToProps
31 | )(App)
32 |
--------------------------------------------------------------------------------
/examples/todomvc/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 | import { createStore } from 'redux'
4 | import { Provider } from 'react-redux'
5 | import App from './containers/App'
6 | import reducer from './reducers'
7 | import 'todomvc-app-css/index.css'
8 |
9 | const store = createStore(reducer)
10 |
11 | render(
12 | 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.
15 | You will also see any lint errors in the console. 16 | 17 | ### `npm run build` 18 | 19 | Builds the app for production to the `build` folder.
20 | It correctly bundles React in production mode and optimizes the build for the best performance. 21 | 22 | The build is minified and the filenames include the hashes.
23 | Your app is ready to be deployed! 24 | 25 | ### `npm run eject` 26 | 27 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 28 | 29 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 30 | 31 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 32 | 33 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 34 | 35 | -------------------------------------------------------------------------------- /examples/todos-flow/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todos", 3 | "version": "0.0.1", 4 | "private": true, 5 | "devDependencies": { 6 | "enzyme": "^2.4.1", 7 | "react-addons-test-utils": "^15.3.0", 8 | "react-scripts": "^0.6.0" 9 | }, 10 | "dependencies": { 11 | "react": "^15.3.0", 12 | "react-dom": "^15.3.0", 13 | "react-redux": "^4.4.5", 14 | "redux": "^3.5.2" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "eject": "react-scripts eject", 20 | "test": "react-scripts test" 21 | }, 22 | "eslintConfig": { 23 | "extends": "./node_modules/react-scripts/config/eslint.js" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/todos-flow/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
9 |
13 | )
14 |
15 | export default App
16 |
--------------------------------------------------------------------------------
/examples/todos-flow/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React from 'react'
3 | import FilterLink from '../containers/FilterLink'
4 |
5 | const Footer = () => (
6 |
7 | Show:
8 | {" "}
9 |
-
13 | {todos.map(todo =>
14 |
17 |
32 |
33 | )
34 | }
35 |
36 | const connector: Connector<{}, Props> = connect()
37 |
38 | export default connector(AddTodo)
39 |
--------------------------------------------------------------------------------
/examples/todos-flow/src/containers/FilterLink.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import { connect } from 'react-redux'
3 | import { setVisibilityFilter } from '../actions'
4 | import Link from '../components/Link'
5 | import type { Props } from '../components/Link'
6 | import type { State, Dispatch, VisibilityFilter } from '../types'
7 | import type { Connector } from 'react-redux'
8 |
9 | type OwnProps = {
10 | filter: VisibilityFilter
11 | };
12 |
13 | const mapStateToProps = (state: State, ownProps) => {
14 | return {
15 | active: ownProps.filter === state.visibilityFilter
16 | }
17 | }
18 |
19 | const mapDispatchToProps = (dispatch: Dispatch, ownProps) => {
20 | return {
21 | onClick: () => {
22 | dispatch(setVisibilityFilter(ownProps.filter))
23 | }
24 | }
25 | }
26 |
27 | const connector: Connector12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.
15 | You will also see any lint errors in the console. 16 | 17 | ### `npm run build` 18 | 19 | Builds the app for production to the `build` folder.
20 | It correctly bundles React in production mode and optimizes the build for the best performance. 21 | 22 | The build is minified and the filenames include the hashes.
23 | Your app is ready to be deployed! 24 | 25 | ### `npm run eject` 26 | 27 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 28 | 29 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 30 | 31 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 32 | 33 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 34 | 35 | -------------------------------------------------------------------------------- /examples/todos-with-undo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todos-with-undo", 3 | "version": "0.0.1", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "^0.6.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.3.0", 10 | "react-dom": "^15.3.0", 11 | "react-redux": "^4.4.5", 12 | "redux": "^3.5.2", 13 | "redux-undo": "^1.0.0-beta9" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "./node_modules/react-scripts/config/eslint.js" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/todos-with-undo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
9 |
14 | )
15 |
16 | export default App
17 |
--------------------------------------------------------------------------------
/examples/todos-with-undo/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import FilterLink from '../containers/FilterLink'
3 |
4 | const Footer = () => (
5 |
6 | Show:
7 | {" "}
8 |
-
6 | {todos.map(todo =>
7 |
10 |
25 |
26 | )
27 | }
28 | AddTodo = connect()(AddTodo)
29 |
30 | export default AddTodo
31 |
--------------------------------------------------------------------------------
/examples/todos-with-undo/src/containers/FilterLink.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 | import { setVisibilityFilter } from '../actions'
3 | import Link from '../components/Link'
4 |
5 | const mapStateToProps = (state, ownProps) => ({
6 | active: ownProps.filter === state.visibilityFilter
7 | })
8 |
9 | const mapDispatchToProps = (dispatch, ownProps) => ({
10 | onClick: () => {
11 | dispatch(setVisibilityFilter(ownProps.filter))
12 | }
13 | })
14 |
15 | const FilterLink = connect(
16 | mapStateToProps,
17 | mapDispatchToProps
18 | )(Link)
19 |
20 | export default FilterLink
21 |
--------------------------------------------------------------------------------
/examples/todos-with-undo/src/containers/UndoRedo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { ActionCreators as UndoActionCreators } from 'redux-undo'
3 | import { connect } from 'react-redux'
4 |
5 | let UndoRedo = ({ canUndo, canRedo, onUndo, onRedo }) => (
6 | 7 | 10 | 13 |
14 | ) 15 | 16 | const mapStateToProps = (state) => ({ 17 | canUndo: state.todos.past.length > 0, 18 | canRedo: state.todos.future.length > 0 19 | }) 20 | 21 | const mapDispatchToProps = ({ 22 | onUndo: UndoActionCreators.undo, 23 | onRedo: UndoActionCreators.redo 24 | }) 25 | 26 | UndoRedo = connect( 27 | mapStateToProps, 28 | mapDispatchToProps 29 | )(UndoRedo) 30 | 31 | export default UndoRedo 32 | -------------------------------------------------------------------------------- /examples/todos-with-undo/src/containers/VisibleTodoList.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux' 2 | import { toggleTodo } from '../actions' 3 | import TodoList from '../components/TodoList' 4 | 5 | const getVisibleTodos = (todos, filter) => { 6 | switch (filter) { 7 | case 'SHOW_ALL': 8 | return todos 9 | case 'SHOW_COMPLETED': 10 | return todos.filter(t => t.completed) 11 | case 'SHOW_ACTIVE': 12 | return todos.filter(t => !t.completed) 13 | default: 14 | throw new Error('Unknown filter: ' + filter) 15 | } 16 | } 17 | 18 | const mapStateToProps = (state) => ({ 19 | todos: getVisibleTodos(state.todos.present, state.visibilityFilter) 20 | }) 21 | 22 | const mapDispatchToProps = ({ 23 | onTodoClick: toggleTodo 24 | }) 25 | 26 | const VisibleTodoList = connect( 27 | mapStateToProps, 28 | mapDispatchToProps 29 | )(TodoList) 30 | 31 | export default VisibleTodoList 32 | -------------------------------------------------------------------------------- /examples/todos-with-undo/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | import { createStore } from 'redux' 4 | import { Provider } from 'react-redux' 5 | import App from './components/App' 6 | import reducer from './reducers' 7 | 8 | const store = createStore(reducer) 9 | 10 | render( 11 |12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.
15 | You will also see any lint errors in the console. 16 | 17 | ### `npm run build` 18 | 19 | Builds the app for production to the `build` folder.
20 | It correctly bundles React in production mode and optimizes the build for the best performance. 21 | 22 | The build is minified and the filenames include the hashes.
23 | Your app is ready to be deployed! 24 | 25 | ### `npm run eject` 26 | 27 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 28 | 29 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 30 | 31 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 32 | 33 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 34 | 35 | -------------------------------------------------------------------------------- /examples/todos/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todos", 3 | "version": "0.0.1", 4 | "private": true, 5 | "devDependencies": { 6 | "enzyme": "^2.4.1", 7 | "react-addons-test-utils": "^15.3.0", 8 | "react-scripts": "^0.6.0" 9 | }, 10 | "dependencies": { 11 | "react": "^15.3.0", 12 | "react-dom": "^15.3.0", 13 | "react-redux": "^4.4.5", 14 | "redux": "^3.5.2" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "eject": "react-scripts eject", 20 | "test": "react-scripts test" 21 | }, 22 | "eslintConfig": { 23 | "extends": "./node_modules/react-scripts/config/eslint.js" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/todos/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
8 |
12 | )
13 |
14 | export default App
15 |
--------------------------------------------------------------------------------
/examples/todos/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import FilterLink from '../containers/FilterLink'
3 |
4 | const Footer = () => (
5 |
6 | Show:
7 | {" "}
8 |
-
6 | {todos.map(todo =>
7 |
10 |
25 |
26 | )
27 | }
28 | AddTodo = connect()(AddTodo)
29 |
30 | export default AddTodo
31 |
--------------------------------------------------------------------------------
/examples/todos/src/containers/FilterLink.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 | import { setVisibilityFilter } from '../actions'
3 | import Link from '../components/Link'
4 |
5 | const mapStateToProps = (state, ownProps) => ({
6 | active: ownProps.filter === state.visibilityFilter
7 | })
8 |
9 | const mapDispatchToProps = (dispatch, ownProps) => ({
10 | onClick: () => {
11 | dispatch(setVisibilityFilter(ownProps.filter))
12 | }
13 | })
14 |
15 | const FilterLink = connect(
16 | mapStateToProps,
17 | mapDispatchToProps
18 | )(Link)
19 |
20 | export default FilterLink
21 |
--------------------------------------------------------------------------------
/examples/todos/src/containers/VisibleTodoList.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 | import { toggleTodo } from '../actions'
3 | import TodoList from '../components/TodoList'
4 |
5 | const getVisibleTodos = (todos, filter) => {
6 | switch (filter) {
7 | case 'SHOW_ALL':
8 | return todos
9 | case 'SHOW_COMPLETED':
10 | return todos.filter(t => t.completed)
11 | case 'SHOW_ACTIVE':
12 | return todos.filter(t => !t.completed)
13 | default:
14 | throw new Error('Unknown filter: ' + filter)
15 | }
16 | }
17 |
18 | const mapStateToProps = (state) => ({
19 | todos: getVisibleTodos(state.todos, state.visibilityFilter)
20 | })
21 |
22 | const mapDispatchToProps = ({
23 | onTodoClick: toggleTodo
24 | })
25 |
26 | const VisibleTodoList = connect(
27 | mapStateToProps,
28 | mapDispatchToProps
29 | )(TodoList)
30 |
31 | export default VisibleTodoList
32 |
--------------------------------------------------------------------------------
/examples/todos/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 | import { createStore } from 'redux'
4 | import { Provider } from 'react-redux'
5 | import App from './components/App'
6 | import reducer from './reducers'
7 |
8 | const store = createStore(reducer)
9 |
10 | render(
11 | 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.
15 | You will also see any lint errors in the console. 16 | 17 | ### `npm run build` 18 | 19 | Builds the app for production to the `build` folder.
20 | It correctly bundles React in production mode and optimizes the build for the best performance. 21 | 22 | The build is minified and the filenames include the hashes.
23 | Your app is ready to be deployed! 24 | 25 | ### `npm run eject` 26 | 27 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 28 | 29 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 30 | 31 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 32 | 33 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 34 | -------------------------------------------------------------------------------- /examples/tree-view/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tree-view", 3 | "version": "0.0.1", 4 | "private": true, 5 | "devDependencies": { 6 | "deep-freeze": "0.0.1", 7 | "enzyme": "^2.4.1", 8 | "react-addons-test-utils": "^15.3.0", 9 | "react-scripts": "^0.6.0" 10 | }, 11 | "dependencies": { 12 | "react": "^15.3.0", 13 | "react-dom": "^15.3.0", 14 | "react-redux": "^4.4.5", 15 | "redux": "^3.5.2" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "eject": "react-scripts eject", 21 | "test": "react-scripts test" 22 | }, 23 | "eslintConfig": { 24 | "extends": "./node_modules/react-scripts/config/eslint.js" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /examples/tree-view/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
41 | Counter: {counter}
42 | {' '}
43 |
46 | {' '}
47 | {typeof parentId !== 'undefined' &&
48 |
50 | ×
51 |
52 | }
53 |
62 | )
63 | }
64 | }
65 |
66 | function mapStateToProps(state, ownProps) {
67 | return state[ownProps.id]
68 | }
69 |
70 | const ConnectedNode = connect(mapStateToProps, actions)(Node)
71 | export default ConnectedNode
72 |
--------------------------------------------------------------------------------
/examples/tree-view/src/generateTree.js:
--------------------------------------------------------------------------------
1 | export default function generateTree() {
2 | let tree = {
3 | 0: {
4 | id: 0,
5 | counter: 0,
6 | childIds: []
7 | }
8 | }
9 |
10 | for (let i = 1; i < 1000; i++) {
11 | let parentId = Math.floor(Math.pow(Math.random(), 2) * i)
12 | tree[i] = {
13 | id: i,
14 | counter: 0,
15 | childIds: []
16 | }
17 | tree[parentId].childIds.push(i)
18 | }
19 |
20 | return tree
21 | }
22 |
--------------------------------------------------------------------------------
/examples/tree-view/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 | import { createStore } from 'redux'
4 | import { Provider } from 'react-redux'
5 | import reducer from './reducers'
6 | import generateTree from './generateTree'
7 | import Node from './containers/Node'
8 |
9 | const tree = generateTree()
10 | const store = createStore(reducer, tree)
11 |
12 | render(
13 | -
54 | {childIds.map(this.renderChild)}
55 |
- 56 | 57 | Add child 58 | 59 | 60 |
5 | Clicked: {counter} times 6 | {' '} 7 | 8 | {' '} 9 | 10 | {' '} 11 | 12 | {' '} 13 | 14 |
15 | ) 16 | 17 | Counter.propTypes = { 18 | increment: PropTypes.func.isRequired, 19 | incrementIfOdd: PropTypes.func.isRequired, 20 | incrementAsync: PropTypes.func.isRequired, 21 | decrement: PropTypes.func.isRequired, 22 | counter: PropTypes.number.isRequired 23 | } 24 | 25 | export default Counter 26 | -------------------------------------------------------------------------------- /examples/universal/common/containers/App.js: -------------------------------------------------------------------------------- 1 | import { bindActionCreators } from 'redux' 2 | import { connect } from 'react-redux' 3 | import Counter from '../components/Counter' 4 | import * as CounterActions from '../actions' 5 | 6 | const mapStateToProps = (state) => ({ 7 | counter: state.counter 8 | }) 9 | 10 | function mapDispatchToProps(dispatch) { 11 | return bindActionCreators(CounterActions, dispatch) 12 | } 13 | 14 | export default connect(mapStateToProps, mapDispatchToProps)(Counter) 15 | -------------------------------------------------------------------------------- /examples/universal/common/reducers/counter.js: -------------------------------------------------------------------------------- 1 | import { SET_COUNTER, INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions' 2 | 3 | const counter = (state = 0, action) => { 4 | switch (action.type) { 5 | case SET_COUNTER: 6 | return action.payload 7 | case INCREMENT_COUNTER: 8 | return state + 1 9 | case DECREMENT_COUNTER: 10 | return state - 1 11 | default: 12 | return state 13 | } 14 | } 15 | 16 | export default counter 17 | -------------------------------------------------------------------------------- /examples/universal/common/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' 2 | import counter from './counter' 3 | 4 | const rootReducer = combineReducers({ 5 | counter 6 | }) 7 | 8 | export default rootReducer 9 | -------------------------------------------------------------------------------- /examples/universal/common/store/configureStore.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from 'redux' 2 | import thunk from 'redux-thunk' 3 | import rootReducer from '../reducers' 4 | 5 | const configureStore = (preloadedState) => { 6 | const store = createStore( 7 | rootReducer, 8 | preloadedState, 9 | applyMiddleware(thunk) 10 | ) 11 | 12 | if (module.hot) { 13 | // Enable Webpack hot module replacement for reducers 14 | module.hot.accept('../reducers', () => { 15 | const nextRootReducer = require('../reducers').default 16 | store.replaceReducer(nextRootReducer) 17 | }) 18 | } 19 | 20 | return store 21 | } 22 | 23 | export default configureStore 24 | -------------------------------------------------------------------------------- /examples/universal/index.js: -------------------------------------------------------------------------------- 1 | require('./client') 2 | -------------------------------------------------------------------------------- /examples/universal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-universal-example", 3 | "version": "0.0.0", 4 | "description": "An example of a universally-rendered Redux application", 5 | "scripts": { 6 | "start": "node server/index.js" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/reactjs/redux.git" 11 | }, 12 | "license": "MIT", 13 | "bugs": { 14 | "url": "https://github.com/reactjs/redux/issues" 15 | }, 16 | "homepage": "http://redux.js.org", 17 | "dependencies": { 18 | "babel-polyfill": "^6.3.14", 19 | "babel-register": "^6.4.3", 20 | "express": "^4.13.3", 21 | "qs": "^4.0.0", 22 | "react": "^0.14.7", 23 | "react-dom": "^0.14.7", 24 | "react-redux": "^4.2.1", 25 | "redux": "^3.2.1", 26 | "redux-thunk": "^1.0.3", 27 | "serve-static": "^1.10.0" 28 | }, 29 | "devDependencies": { 30 | "babel-core": "^6.3.15", 31 | "babel-loader": "^6.2.0", 32 | "babel-preset-es2015": "^6.3.13", 33 | "babel-preset-react": "^6.3.13", 34 | "babel-preset-react-hmre": "^1.1.1", 35 | "babel-runtime": "^6.3.13", 36 | "webpack": "^1.11.0", 37 | "webpack-dev-middleware": "^1.4.0", 38 | "webpack-hot-middleware": "^2.9.1" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/universal/server/index.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | require('./server') 3 | -------------------------------------------------------------------------------- /examples/universal/server/server.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console, no-use-before-define */ 2 | 3 | import path from 'path' 4 | import Express from 'express' 5 | import qs from 'qs' 6 | 7 | import webpack from 'webpack' 8 | import webpackDevMiddleware from 'webpack-dev-middleware' 9 | import webpackHotMiddleware from 'webpack-hot-middleware' 10 | import webpackConfig from '../webpack.config' 11 | 12 | import React from 'react' 13 | import { renderToString } from 'react-dom/server' 14 | import { Provider } from 'react-redux' 15 | 16 | import configureStore from '../common/store/configureStore' 17 | import App from '../common/containers/App' 18 | import { fetchCounter } from '../common/api/counter' 19 | 20 | const app = new Express() 21 | const port = 3000 22 | 23 | // Use this middleware to set up hot module reloading via webpack. 24 | const compiler = webpack(webpackConfig) 25 | app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath })) 26 | app.use(webpackHotMiddleware(compiler)) 27 | 28 | // This is fired every time the server side receives a request 29 | app.use(handleRender) 30 | 31 | function handleRender(req, res) { 32 | // Query our mock API asynchronously 33 | fetchCounter(apiResult => { 34 | // Read the counter from the request, if provided 35 | const params = qs.parse(req.query) 36 | const counter = parseInt(params.counter, 10) || apiResult || 0 37 | 38 | // Compile an initial state 39 | const preloadedState = { counter } 40 | 41 | // Create a new Redux store instance 42 | const store = configureStore(preloadedState) 43 | 44 | // Render the component to a string 45 | const html = renderToString( 46 |${html}
68 |
71 |
72 |
73 |
74 | `
75 | }
76 |
77 | app.listen(port, (error) => {
78 | if (error) {
79 | console.error(error)
80 | } else {
81 | console.info(`==> 🌎 Listening on port ${port}. Open up http://localhost:${port}/ in your browser.`)
82 | }
83 | })
84 |
--------------------------------------------------------------------------------
/examples/universal/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 |
4 | module.exports = {
5 | devtool: 'inline-source-map',
6 | entry: [
7 | 'webpack-hot-middleware/client',
8 | './client/index.js'
9 | ],
10 | output: {
11 | path: path.join(__dirname, 'dist'),
12 | filename: 'bundle.js',
13 | publicPath: '/static/'
14 | },
15 | plugins: [
16 | new webpack.optimize.OccurrenceOrderPlugin(),
17 | new webpack.HotModuleReplacementPlugin()
18 | ],
19 | module: {
20 | loaders: [
21 | {
22 | test: /\.js$/,
23 | loader: 'babel',
24 | exclude: /node_modules/,
25 | include: __dirname,
26 | query: {
27 | presets: [ 'react-hmre' ]
28 | }
29 | }
30 | ]
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/flow-typed/redux.js:
--------------------------------------------------------------------------------
1 | declare module 'redux' {
2 |
3 | /*
4 |
5 | S = State
6 | A = Action
7 |
8 | */
9 |
10 | declare type Dispatch
11 |
12 | Download as [PNG](https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png) or [SVG](https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.svg).
13 |
14 | ## Logo with a Dark Title
15 |
16 | 
17 |
18 | Download as [PNG](https://raw.githubusercontent.com/reactjs/redux/master/logo/logo-title-dark.png).
19 |
20 | ## Logo with a Light Title
21 |
22 | 
23 |
24 | *(You can't see the text but it's there, in white.)*
25 |
26 | Download as [PNG](https://raw.githubusercontent.com/reactjs/redux/master/logo/logo-title-light.png).
27 |
28 | ## Modifications
29 |
30 | Whenever possible, we ask you to use the originals provided on this page.
31 |
32 | If for some reason you must change how the title is rendered and can't use the prerendered version we provide, we ask that you use the free [Lato Black](http://www.latofonts.com/lato-free-fonts/) font and ensure there is enough space between the logo and the title.
33 |
34 | When in doubt, use the original logos.
35 |
36 | ## Credits
37 |
38 | The Redux logo was designed by [Matthew Johnston](http://thedeskofmatthew.com/).
39 | Thanks to [Jay Phelps](https://github.com/jayphelps) and [the community](https://github.com/reactjs/redux/issues/151) for contributing earlier proposals.
40 |
41 | ## License
42 |
43 | The Redux logo is licensed under CC0, waiving all copyright.
44 | [Read the license.](../LICENSE-logo.md)
45 |
--------------------------------------------------------------------------------
/logo/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markerikson/redux/9b9a4fe6c3133fe35559d0d48faf5d085cce9511/logo/apple-touch-icon.png
--------------------------------------------------------------------------------
/logo/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markerikson/redux/9b9a4fe6c3133fe35559d0d48faf5d085cce9511/logo/favicon.ico
--------------------------------------------------------------------------------
/logo/logo-title-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markerikson/redux/9b9a4fe6c3133fe35559d0d48faf5d085cce9511/logo/logo-title-dark.png
--------------------------------------------------------------------------------
/logo/logo-title-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markerikson/redux/9b9a4fe6c3133fe35559d0d48faf5d085cce9511/logo/logo-title-light.png
--------------------------------------------------------------------------------
/logo/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markerikson/redux/9b9a4fe6c3133fe35559d0d48faf5d085cce9511/logo/logo.png
--------------------------------------------------------------------------------
/logo/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/applyMiddleware.js:
--------------------------------------------------------------------------------
1 | import compose from './compose'
2 |
3 | /**
4 | * Creates a store enhancer that applies middleware to the dispatch method
5 | * of the Redux store. This is handy for a variety of tasks, such as expressing
6 | * asynchronous actions in a concise manner, or logging every action payload.
7 | *
8 | * See `redux-thunk` package as an example of the Redux middleware.
9 | *
10 | * Because middleware is potentially asynchronous, this should be the first
11 | * store enhancer in the composition chain.
12 | *
13 | * Note that each middleware will be given the `dispatch` and `getState` functions
14 | * as named arguments.
15 | *
16 | * @param {...Function} middlewares The middleware chain to be applied.
17 | * @returns {Function} A store enhancer applying the middleware.
18 | */
19 | export default function applyMiddleware(...middlewares) {
20 | return (createStore) => (reducer, preloadedState, enhancer) => {
21 | var store = createStore(reducer, preloadedState, enhancer)
22 | var dispatch = store.dispatch
23 | var chain = []
24 |
25 | var middlewareAPI = {
26 | getState: store.getState,
27 | dispatch: (action) => dispatch(action)
28 | }
29 | chain = middlewares.map(middleware => middleware(middlewareAPI))
30 | dispatch = compose(...chain)(store.dispatch)
31 |
32 | return {
33 | ...store,
34 | dispatch
35 | }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/bindActionCreators.js:
--------------------------------------------------------------------------------
1 | function bindActionCreator(actionCreator, dispatch) {
2 | return (...args) => dispatch(actionCreator(...args))
3 | }
4 |
5 | /**
6 | * Turns an object whose values are action creators, into an object with the
7 | * same keys, but with every function wrapped into a `dispatch` call so they
8 | * may be invoked directly. This is just a convenience method, as you can call
9 | * `store.dispatch(MyActionCreators.doSomething())` yourself just fine.
10 | *
11 | * For convenience, you can also pass a single function as the first argument,
12 | * and get a function in return.
13 | *
14 | * @param {Function|Object} actionCreators An object whose values are action
15 | * creator functions. One handy way to obtain it is to use ES6 `import * as`
16 | * syntax. You may also pass a single function.
17 | *
18 | * @param {Function} dispatch The `dispatch` function available on your Redux
19 | * store.
20 | *
21 | * @returns {Function|Object} The object mimicking the original object, but with
22 | * every action creator wrapped into the `dispatch` call. If you passed a
23 | * function as `actionCreators`, the return value will also be a single
24 | * function.
25 | */
26 | export default function bindActionCreators(actionCreators, dispatch) {
27 | if (typeof actionCreators === 'function') {
28 | return bindActionCreator(actionCreators, dispatch)
29 | }
30 |
31 | if (typeof actionCreators !== 'object' || actionCreators === null) {
32 | throw new Error(
33 | `bindActionCreators expected an object or a function, instead received ${actionCreators === null ? 'null' : typeof actionCreators}. ` +
34 | `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
35 | )
36 | }
37 |
38 | var keys = Object.keys(actionCreators)
39 | var boundActionCreators = {}
40 | for (var i = 0; i < keys.length; i++) {
41 | var key = keys[i]
42 | var actionCreator = actionCreators[key]
43 | if (typeof actionCreator === 'function') {
44 | boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
45 | }
46 | }
47 | return boundActionCreators
48 | }
49 |
--------------------------------------------------------------------------------
/src/compose.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Composes single-argument functions from right to left. The rightmost
3 | * function can take multiple arguments as it provides the signature for
4 | * the resulting composite function.
5 | *
6 | * @param {...Function} funcs The functions to compose.
7 | * @returns {Function} A function obtained by composing the argument functions
8 | * from right to left. For example, compose(f, g, h) is identical to doing
9 | * (...args) => f(g(h(...args))).
10 | */
11 |
12 | export default function compose(...funcs) {
13 | if (funcs.length === 0) {
14 | return arg => arg
15 | }
16 |
17 | if (funcs.length === 1) {
18 | return funcs[0]
19 | }
20 |
21 | const last = funcs[funcs.length - 1]
22 | const rest = funcs.slice(0, -1)
23 | return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
24 | }
25 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import createStore from './createStore'
2 | import combineReducers from './combineReducers'
3 | import bindActionCreators from './bindActionCreators'
4 | import applyMiddleware from './applyMiddleware'
5 | import compose from './compose'
6 | import warning from './utils/warning'
7 |
8 | /*
9 | * This is a dummy function to check if the function name has been altered by minification.
10 | * If the function has been minified and NODE_ENV !== 'production', warn the user.
11 | */
12 | function isCrushed() {}
13 |
14 | if (
15 | process.env.NODE_ENV !== 'production' &&
16 | typeof isCrushed.name === 'string' &&
17 | isCrushed.name !== 'isCrushed'
18 | ) {
19 | warning(
20 | 'You are currently using minified code outside of NODE_ENV === \'production\'. ' +
21 | 'This means that you are running a slower development build of Redux. ' +
22 | 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' +
23 | 'or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) ' +
24 | 'to ensure you have the correct code for your production build.'
25 | )
26 | }
27 |
28 | export {
29 | createStore,
30 | combineReducers,
31 | bindActionCreators,
32 | applyMiddleware,
33 | compose
34 | }
35 |
--------------------------------------------------------------------------------
/src/utils/warning.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Prints a warning in the console if it exists.
3 | *
4 | * @param {String} message The warning message.
5 | * @returns {void}
6 | */
7 | export default function warning(message) {
8 | /* eslint-disable no-console */
9 | if (typeof console !== 'undefined' && typeof console.error === 'function') {
10 | console.error(message)
11 | }
12 | /* eslint-enable no-console */
13 | try {
14 | // This error was thrown as a convenience so that if you enable
15 | // "break on all exceptions" in your console,
16 | // it would pause the execution at this line.
17 | throw new Error(message)
18 | /* eslint-disable no-empty */
19 | } catch (e) { }
20 | /* eslint-enable no-empty */
21 | }
22 |
--------------------------------------------------------------------------------
/test/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/test/compose.spec.js:
--------------------------------------------------------------------------------
1 | import { compose } from '../src'
2 |
3 | describe('Utils', () => {
4 | describe('compose', () => {
5 | it('composes from right to left', () => {
6 | const double = x => x * 2
7 | const square = x => x * x
8 | expect(compose(square)(5)).toBe(25)
9 | expect(compose(square, double)(5)).toBe(100)
10 | expect(compose(double, square, double)(5)).toBe(200)
11 | })
12 |
13 | it('composes functions from right to left', () => {
14 | const a = next => x => next(x + 'a')
15 | const b = next => x => next(x + 'b')
16 | const c = next => x => next(x + 'c')
17 | const final = x => x
18 |
19 | expect(compose(a, b, c)(final)('')).toBe('abc')
20 | expect(compose(b, c, a)(final)('')).toBe('bca')
21 | expect(compose(c, a, b)(final)('')).toBe('cab')
22 | })
23 |
24 | it('can be seeded with multiple arguments', () => {
25 | const square = x => x * x
26 | const add = (x, y) => x + y
27 | expect(compose(square, add)(1, 2)).toBe(9)
28 | })
29 |
30 | it('returns the first given argument if given no functions', () => {
31 | expect(compose()(1, 2)).toBe(1)
32 | expect(compose()(3)).toBe(3)
33 | expect(compose()()).toBe(undefined)
34 | })
35 |
36 | it('returns the first function if given only one', () => {
37 | const fn = () => {}
38 |
39 | expect(compose(fn)).toBe(fn)
40 | })
41 | })
42 | })
43 |
--------------------------------------------------------------------------------
/test/helpers/actionCreators.js:
--------------------------------------------------------------------------------
1 | import { ADD_TODO, DISPATCH_IN_MIDDLE, THROW_ERROR, UNKNOWN_ACTION } from './actionTypes'
2 |
3 | export function addTodo(text) {
4 | return { type: ADD_TODO, text }
5 | }
6 |
7 | export function addTodoAsync(text) {
8 | return dispatch => new Promise(resolve => setImmediate(() => {
9 | dispatch(addTodo(text))
10 | resolve()
11 | }))
12 | }
13 |
14 | export function addTodoIfEmpty(text) {
15 | return (dispatch, getState) => {
16 | if (!getState().length) {
17 | dispatch(addTodo(text))
18 | }
19 | }
20 | }
21 |
22 | export function dispatchInMiddle(boundDispatchFn) {
23 | return {
24 | type: DISPATCH_IN_MIDDLE,
25 | boundDispatchFn
26 | }
27 | }
28 |
29 | export function throwError() {
30 | return {
31 | type: THROW_ERROR
32 | }
33 | }
34 |
35 | export function unknownAction() {
36 | return {
37 | type: UNKNOWN_ACTION
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/test/helpers/actionTypes.js:
--------------------------------------------------------------------------------
1 | export const ADD_TODO = 'ADD_TODO'
2 | export const DISPATCH_IN_MIDDLE = 'DISPATCH_IN_MIDDLE'
3 | export const THROW_ERROR = 'THROW_ERROR'
4 | export const UNKNOWN_ACTION = 'UNKNOWN_ACTION'
5 |
--------------------------------------------------------------------------------
/test/helpers/middleware.js:
--------------------------------------------------------------------------------
1 | export function thunk({ dispatch, getState }) {
2 | return next => action =>
3 | typeof action === 'function' ?
4 | action(dispatch, getState) :
5 | next(action)
6 | }
7 |
--------------------------------------------------------------------------------
/test/helpers/reducers.js:
--------------------------------------------------------------------------------
1 | import { ADD_TODO, DISPATCH_IN_MIDDLE, THROW_ERROR } from './actionTypes'
2 |
3 |
4 | function id(state = []) {
5 | return state.reduce((result, item) => (
6 | item.id > result ? item.id : result
7 | ), 0) + 1
8 | }
9 |
10 | export function todos(state = [], action) {
11 | switch (action.type) {
12 | case ADD_TODO:
13 | return [
14 | ...state,
15 | {
16 | id: id(state),
17 | text: action.text
18 | }
19 | ]
20 | default:
21 | return state
22 | }
23 | }
24 |
25 | export function todosReverse(state = [], action) {
26 | switch (action.type) {
27 | case ADD_TODO:
28 | return [
29 | {
30 | id: id(state),
31 | text: action.text
32 | }, ...state
33 | ]
34 | default:
35 | return state
36 | }
37 | }
38 |
39 | export function dispatchInTheMiddleOfReducer(state = [], action) {
40 | switch (action.type) {
41 | case DISPATCH_IN_MIDDLE:
42 | action.boundDispatchFn()
43 | return state
44 | default:
45 | return state
46 | }
47 | }
48 |
49 | export function errorThrowingReducer(state = [], action) {
50 | switch (action.type) {
51 | case THROW_ERROR:
52 | throw new Error()
53 | default:
54 | return state
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/test/typescript.spec.js:
--------------------------------------------------------------------------------
1 | import * as tt from 'typescript-definition-tester'
2 |
3 |
4 | describe('TypeScript definitions', function () {
5 | it('should compile against index.d.ts', (done) => {
6 | tt.compileDirectory(
7 | __dirname + '/typescript',
8 | fileName => fileName.match(/\.ts$/),
9 | () => done()
10 | )
11 | })
12 | })
13 |
--------------------------------------------------------------------------------
/test/typescript/actionCreators.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ActionCreator, Action, Dispatch,
3 | bindActionCreators, ActionCreatorsMapObject
4 | } from "../../index.d.ts";
5 |
6 |
7 | interface AddTodoAction extends Action {
8 | text: string;
9 | }
10 |
11 | const addTodo: ActionCreator extends ReduxAction {
6 | payload: P;
7 | }
8 |
9 | const action: Action {
11 | , getState: () => S) => R): R;
12 | }
13 | }
14 |
15 | const dispatchThunkResult: number = dispatch(() => 42);
16 | const dispatchedTimerId: number = dispatch(d => setTimeout(() => d({type: 'TYPE'}), 1000));
17 |
--------------------------------------------------------------------------------
/test/typescript/middleware.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Middleware, MiddlewareAPI,
3 | applyMiddleware, createStore, Dispatch, Reducer, Action
4 | } from "../../index.d.ts";
5 |
6 | declare module "../../index.d.ts" {
7 | export interface Dispatch {
8 | , getState: () => S) => R): R;
9 | }
10 | }
11 |
12 | type Thunk, getState: () => S) => O;
13 |
14 | const thunkMiddleware: Middleware =
15 | ({dispatch, getState}: MiddlewareAPI) =>
16 | (next: Dispatch) =>
17 | (action: A | Thunk({getState}: MiddlewareAPI) =>
25 | (next: Dispatch) =>
26 | (action: any): any => {
27 | console.log('will dispatch', action)
28 |
29 | // Call the next dispatch method in the middleware chain.
30 | const returnValue = next(action)
31 |
32 | console.log('state after dispatch', getState())
33 |
34 | // This will likely be the action itself, unless
35 | // a middleware further in chain changed it.
36 | return returnValue
37 | }
38 |
39 |
40 |
41 | type State = {
42 | todos: string[];
43 | }
44 |
45 | const reducer: Reducer(next: StoreEnhancerStoreCreator) => next;
25 | const specificEnhencer: StoreEnhancer