60 |
61 | We specified the behavior of our app before we even started writing the UI. We won’t do this in this tutorial, but at this point you can write tests for your reducers and action creators. You won’t need to mock anything because they are just functions. Call them, and make assertions on what they return.
62 |
63 | ## Source Code
64 |
65 | #### `index.js`
66 |
67 | ```js
68 | import { createStore } from 'redux'
69 | import todoApp from './reducers'
70 |
71 | let store = createStore(todoApp)
72 | ```
73 |
74 | ## Next Steps
75 |
76 | Before creating a UI for our todo app, we will take a detour to see [how the data flows in a Redux application](DataFlow.md).
77 |
--------------------------------------------------------------------------------
/docs/introduction/Motivation.md:
--------------------------------------------------------------------------------
1 | # Motivation
2 |
3 | As the requirements for JavaScript single-page applications have become increasingly complicated, **our code must manage more state than ever before**. This state can include server responses and cached data, as well as locally created data that has not yet been persisted to the server. UI state is also increasing in complexity, as we need to manage the active route, the selected tab, whether to show a spinner or not, should pagination controls be displayed, and so on.
4 |
5 | Managing this ever-changing state is hard. If a model can update another model, then a view can update a model, which updates another model, and this, in turn, might cause another view to update. At some point, you no longer understand what happens in your app as you have **lost control over the when, why, and how of its state.** When a system is opaque and non-deterministic, it’s hard to reproduce bugs or add new features.
6 |
7 | As if this wasn’t bad enough, consider the **new requirements becoming common in front-end product development**. As developers, we are expected to handle optimistic updates, server-side rendering, fetching data before performing route transitions, and so on. We find ourselves trying to manage a complexity that we have never had to deal with before, and we inevitably ask the question: [is it time to give up?](http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html) The answer is _no_.
8 |
9 | This complexity is difficult to handle as **we’re mixing two concepts** that are very hard for the human mind to reason about: **mutation and asynchronicity.** I call them [Mentos and Coke](https://en.wikipedia.org/wiki/Diet_Coke_and_Mentos_eruption). Both can be great in separation, but together they create a mess. Libraries like [React](http://facebook.github.io/react) attempt to solve this problem in the view layer by removing both asynchrony and direct DOM manipulation. However, managing the state of your data is left up to you. This is where Redux enters.
10 |
11 | Following in the steps of [Flux](http://facebook.github.io/flux), [CQRS](http://martinfowler.com/bliki/CQRS.html), and [Event Sourcing](http://martinfowler.com/eaaDev/EventSourcing.html), **Redux attempts to make state mutations predictable** by imposing certain restrictions on how and when updates can happen. These restrictions are reflected in the [three principles](ThreePrinciples.md) of Redux.
12 |
--------------------------------------------------------------------------------
/docs/introduction/README.md:
--------------------------------------------------------------------------------
1 | ## Introduction
2 |
3 | * [Motivation](Motivation.md)
4 | * [Three Principles](ThreePrinciples.md)
5 | * [Prior Art](PriorArt.md)
6 | * [Ecosystem](Ecosystem.md)
7 | * [Examples](Examples.md)
8 |
--------------------------------------------------------------------------------
/docs/introduction/ThreePrinciples.md:
--------------------------------------------------------------------------------
1 | # Three Principles
2 |
3 | Redux can be described in three fundamental principles:
4 |
5 | ### Single source of truth
6 |
7 | **The [state](../Glossary.md#state) of your whole application is stored in an object tree within a single [store](../Glossary.md#store).**
8 |
9 | This makes it easy to create universal apps, as the state from your server can be serialized and hydrated into the client with no extra coding effort. A single state tree also makes it easier to debug or introspect an application; it also enables you to persist your app’s state in development, for a faster development cycle. Some functionality which has been traditionally difficult to implement - Undo/Redo, for example - can suddenly become trivial to implement, if all of your state is stored in a single tree.
10 |
11 | ```js
12 | console.log(store.getState())
13 |
14 | /* Prints
15 | {
16 | visibilityFilter: 'SHOW_ALL',
17 | todos: [
18 | {
19 | text: 'Consider using Redux',
20 | completed: true,
21 | },
22 | {
23 | text: 'Keep all state in a single tree',
24 | completed: false
25 | }
26 | ]
27 | }
28 | */
29 | ```
30 |
31 | ### State is read-only
32 |
33 | **The only way to mutate the state is to emit an [action](../Glossary.md#action), an object describing what happened.**
34 |
35 | This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to mutate. Because all mutations are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.
36 |
37 | ```js
38 | store.dispatch({
39 | type: 'COMPLETE_TODO',
40 | index: 1
41 | })
42 |
43 | store.dispatch({
44 | type: 'SET_VISIBILITY_FILTER',
45 | filter: 'SHOW_COMPLETED'
46 | })
47 | ```
48 |
49 | ### Changes are made with pure functions
50 |
51 | **To specify how the state tree is transformed by actions, you write pure [reducers](../Glossary.md#reducer).**
52 |
53 | Reducers are just pure functions that take the previous state and an action, and return the next state. Remember to return new state objects, instead of mutating the previous state. You can start with a single reducer, and as your app grows, split it off into smaller reducers that manage specific parts of the state tree. Because reducers are just functions, you can control the order in which they are called, pass additional data, or even make reusable reducers for common tasks such as pagination.
54 |
55 | ```js
56 |
57 | function visibilityFilter(state = 'SHOW_ALL', action) {
58 | switch (action.type) {
59 | case 'SET_VISIBILITY_FILTER':
60 | return action.filter
61 | default:
62 | return state
63 | }
64 | }
65 |
66 | function todos(state = [], action) {
67 | switch (action.type) {
68 | case 'ADD_TODO':
69 | return [
70 | ...state,
71 | {
72 | text: action.text,
73 | completed: false
74 | }
75 | ]
76 | case 'COMPLETE_TODO':
77 | return [
78 | ...state.slice(0, action.index),
79 | Object.assign({}, state[action.index], {
80 | completed: true
81 | }),
82 | ...state.slice(action.index + 1)
83 | ]
84 | default:
85 | return state
86 | }
87 | }
88 |
89 | import { combineReducers, createStore } from 'redux'
90 | let reducer = combineReducers({ visibilityFilter, todos })
91 | let store = createStore(reducer)
92 | ```
93 |
94 | That’s it! Now you know what Redux is all about.
95 |
--------------------------------------------------------------------------------
/docs/recipes/MigratingToRedux.md:
--------------------------------------------------------------------------------
1 | # Migrating to Redux
2 |
3 | Redux is not a monolithic framework, but a set of contracts and a [few functions that make them work together](../api/README.md). The majority of your “Redux code” will not even use Redux APIs, as most of the time you’ll be writing functions.
4 |
5 | This makes it easy to migrate both to and from Redux.
6 | We don’t want to lock you in!
7 |
8 | ## From Flux
9 |
10 | [Reducers](../Glossary.md#reducer) capture “the essence” of Flux Stores, so it’s possible to gradually migrate an existing Flux project towards Redux, whether you are using [Flummox](http://github.com/acdlite/flummox), [Alt](http://github.com/goatslacker/alt), [traditional Flux](https://github.com/facebook/flux), or any other Flux library.
11 |
12 | It is also possible to do the reverse and migrate from Redux to any of these libraries following the same steps.
13 |
14 | Your process will look like this:
15 |
16 | * Create a function called `createFluxStore(reducer)` that creates a Flux store compatible with your existing app from a reducer function. Internally it might look similar to [`createStore`](../api/createStore.md) ([source](https://github.com/reactjs/redux/blob/master/src/createStore.js)) implementation from Redux. Its dispatch handler should just call the `reducer` for any action, store the next state, and emit change.
17 |
18 | * This allows you to gradually rewrite every Flux Store in your app as a reducer, but still export `createFluxStore(reducer)` so the rest of your app is not aware that this is happening and sees the Flux stores.
19 |
20 | * As you rewrite your Stores, you will find that you need to avoid certain Flux anti-patterns such as fetching API inside the Store, or triggering actions inside the Stores. Your Flux code will be easier to follow once you port it to be based on reducers!
21 |
22 | * When you have ported all of your Flux Stores to be implemented on top of reducers, you can replace the Flux library with a single Redux store, and combine those reducers you already have into one using [`combineReducers(reducers)`](../api/combineReducers.md).
23 |
24 | * Now all that’s left to do is to port the UI to [use react-redux](../basics/UsageWithReact.md) or equivalent.
25 |
26 | * Finally, you might want to begin using some Redux idioms like middleware to further simplify your asynchronous code.
27 |
28 | ## From Backbone
29 |
30 | Backbone’s model layer is quite different from Redux, so we don’t suggest mixing them. If possible, it is best that you rewrite your app’s model layer from scratch instead of connecting Backbone to Redux. However, if a rewrite is not feasible, you may use [backbone-redux](https://github.com/redbooth/backbone-redux) to migrate gradually, and keep the Redux store in sync with Backbone models and collections.
31 |
--------------------------------------------------------------------------------
/docs/recipes/README.md:
--------------------------------------------------------------------------------
1 | # Recipes
2 |
3 | These are some use cases and code snippets to get you started with Redux in a real app. They assume you understand the topics in [basic](../basics/README.md) and [advanced](../advanced/README.md) tutorials.
4 |
5 | * [Migrating to Redux](MigratingToRedux.md)
6 | * [Using Object Spread Operator](UsingObjectSpreadOperator.md)
7 | * [Reducing Boilerplate](ReducingBoilerplate.md)
8 | * [Server Rendering](ServerRendering.md)
9 | * [Writing Tests](WritingTests.md)
10 | * [Computing Derived Data](ComputingDerivedData.md)
11 | * [Implementing Undo History](ImplementingUndoHistory.md)
12 |
13 |
--------------------------------------------------------------------------------
/docs/recipes/UsingObjectSpreadOperator.md:
--------------------------------------------------------------------------------
1 | # Using Object Spread Operator
2 |
3 | Since one of the core tenets of Redux is to never mutate state, you’ll often find yourself using [`Object.assign()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) to create
4 | copies of objects with new or updated values. For example, in the `todoApp` below `Object.assign()` is used to return a new
5 | `state` object with an updated `visibilityFilter` property:
6 |
7 | ```js
8 | function todoApp(state = initialState, action) {
9 | switch (action.type) {
10 | case SET_VISIBILITY_FILTER:
11 | return Object.assign({}, state, {
12 | visibilityFilter: action.filter
13 | })
14 | default:
15 | return state
16 | }
17 | }
18 | ```
19 |
20 | While effective, using `Object.assign()` can quickly make simple reducers difficult to read given its rather verbose syntax.
21 |
22 | An alternative approach is to use the [object spread syntax](https://github.com/sebmarkbage/ecmascript-rest-spread) proposed for the next versions of JavaScript which lets you use the spread (`...`) operator to copy enumerable properties from one object to another in a more succinct way. The object spread operator is conceptually similar to the ES6 [array spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). We
23 | can simplify the `todoApp` example above by using the object spread syntax:
24 |
25 | ```js
26 | function todoApp(state = initialState, action) {
27 | switch (action.type) {
28 | case SET_VISIBILITY_FILTER:
29 | return { ...state, visibilityFilter: action.filter }
30 | default:
31 | return state
32 | }
33 | }
34 | ```
35 |
36 | The advantage of using the object spread syntax becomes more apparent when you’re composing complex objects. Below `getAddedIds` maps an array of `id` values to an array of objects with values returned from `getProduct` and `getQuantity`.
37 |
38 | ```js
39 | return getAddedIds(state.cart).map(id => Object.assign(
40 | {},
41 | getProduct(state.products, id),
42 | {
43 | quantity: getQuantity(state.cart, id)
44 | }
45 | ))
46 | ```
47 |
48 | Object spread lets us simplify the above `map` call to:
49 |
50 | ```js
51 | return getAddedIds(state.cart).map(id => ({
52 | ...getProduct(state.products, id),
53 | quantity: getQuantity(state.cart, id)
54 | }))
55 | ```
56 |
57 | Since the object spread syntax is still a Stage 2 proposal for ECMAScript you’ll need to use a transpiler such as [Babel](http://babeljs.io/) to use it in production. You can use your existing `es2015` preset, install [`babel-plugin-transform-object-rest-spread`](http://babeljs.io/docs/plugins/transform-object-rest-spread/) and add it individually to the `plugins` array in your `.babelrc`.
58 |
59 | ```js
60 | {
61 | "presets": ["es2015"],
62 | "plugins": ["transform-object-rest-spread"]
63 | }
64 | ```
65 |
66 | Note that this is still an experimental language feature proposal so it may change in the future. Nevertheless some large projects such as [React Native](https://github.com/facebook/react-native) already use it extensively so it is safe to say that there will be a good automated migration path if it changes.
67 |
--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
1 | # Examples
2 |
3 | Read the descriptions for every example on the [Examples](../docs/introduction/Examples.md) documentation page.
4 |
--------------------------------------------------------------------------------
/examples/async/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react"],
3 | "env": {
4 | "development": {
5 | "presets": ["react-hmre"]
6 | }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/examples/async/actions/index.js:
--------------------------------------------------------------------------------
1 | import fetch from 'isomorphic-fetch'
2 |
3 | export const REQUEST_POSTS = 'REQUEST_POSTS'
4 | export const RECEIVE_POSTS = 'RECEIVE_POSTS'
5 | export const SELECT_REDDIT = 'SELECT_REDDIT'
6 | export const INVALIDATE_REDDIT = 'INVALIDATE_REDDIT'
7 |
8 | export function selectReddit(reddit) {
9 | return {
10 | type: SELECT_REDDIT,
11 | reddit
12 | }
13 | }
14 |
15 | export function invalidateReddit(reddit) {
16 | return {
17 | type: INVALIDATE_REDDIT,
18 | reddit
19 | }
20 | }
21 |
22 | function requestPosts(reddit) {
23 | return {
24 | type: REQUEST_POSTS,
25 | reddit
26 | }
27 | }
28 |
29 | function receivePosts(reddit, json) {
30 | return {
31 | type: RECEIVE_POSTS,
32 | reddit: reddit,
33 | posts: json.data.children.map(child => child.data),
34 | receivedAt: Date.now()
35 | }
36 | }
37 |
38 | function fetchPosts(reddit) {
39 | return dispatch => {
40 | dispatch(requestPosts(reddit))
41 | return fetch(`https://www.reddit.com/r/${reddit}.json`)
42 | .then(response => response.json())
43 | .then(json => dispatch(receivePosts(reddit, json)))
44 | }
45 | }
46 |
47 | function shouldFetchPosts(state, reddit) {
48 | const posts = state.postsByReddit[reddit]
49 | if (!posts) {
50 | return true
51 | }
52 | if (posts.isFetching) {
53 | return false
54 | }
55 | return posts.didInvalidate
56 | }
57 |
58 | export function fetchPostsIfNeeded(reddit) {
59 | return (dispatch, getState) => {
60 | if (shouldFetchPosts(getState(), reddit)) {
61 | return dispatch(fetchPosts(reddit))
62 | }
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/examples/async/components/Picker.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 |
3 | export default class Picker extends Component {
4 | render() {
5 | const { value, onChange, options } = this.props
6 |
7 | return (
8 |
42 |
57 | )
58 | }
59 | }
60 |
61 | Explore.propTypes = {
62 | value: PropTypes.string.isRequired,
63 | onChange: PropTypes.func.isRequired
64 | }
65 |
--------------------------------------------------------------------------------
/examples/real-world/components/List.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 |
3 | export default class List extends Component {
4 | renderLoadMore() {
5 | const { isFetching, onLoadMoreClick } = this.props
6 | return (
7 |
12 | )
13 | }
14 |
15 | render() {
16 | const {
17 | isFetching, nextPageUrl, pageCount,
18 | items, renderItem, loadingLabel
19 | } = this.props
20 |
21 | const isEmpty = items.length === 0
22 | if (isEmpty && isFetching) {
23 | return Type a username or repo full name and hit 'Go':
43 | 47 | 50 |51 | Code on Github. 52 |
53 |54 | Move the DevTools with Ctrl+W or hide them with Ctrl+H. 55 |
56 |{loadingLabel}
24 | } 25 | 26 | const isLastPage = !nextPageUrl 27 | if (isEmpty && isLastPage) { 28 | returnNothing here!
29 | } 30 | 31 | return ( 32 |
33 | {items.map(renderItem)}
34 | {pageCount > 0 && !isLastPage && this.renderLoadMore()}
35 |
36 | )
37 | }
38 | }
39 |
40 | List.propTypes = {
41 | loadingLabel: PropTypes.string.isRequired,
42 | pageCount: PropTypes.number,
43 | renderItem: PropTypes.func.isRequired,
44 | items: PropTypes.array.isRequired,
45 | isFetching: PropTypes.bool.isRequired,
46 | onLoadMoreClick: PropTypes.func.isRequired,
47 | nextPageUrl: PropTypes.string
48 | }
49 |
50 | List.defaultProps = {
51 | isFetching: true,
52 | loadingLabel: 'Loading...'
53 | }
54 |
--------------------------------------------------------------------------------
/examples/real-world/components/Repo.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { Link } from 'react-router'
3 |
4 | export default class Repo extends Component {
5 |
6 | render() {
7 | const { repo, owner } = this.props
8 | const { login } = owner
9 | const { name, description } = repo
10 |
11 | return (
12 |
13 |
26 | )
27 | }
28 | }
29 |
30 | Repo.propTypes = {
31 | repo: PropTypes.shape({
32 | name: PropTypes.string.isRequired,
33 | description: PropTypes.string
34 | }).isRequired,
35 | owner: PropTypes.shape({
36 | login: PropTypes.string.isRequired
37 | }).isRequired
38 | }
39 |
--------------------------------------------------------------------------------
/examples/real-world/components/User.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { Link } from 'react-router'
3 |
4 | export default class User extends Component {
5 | render() {
6 | const { login, avatarUrl, name } = this.props.user
7 |
8 | return (
9 | 14 | 15 | {name} 16 | 17 | {' by '} 18 | 19 | {login} 20 | 21 |
22 | {description && 23 |{description}
24 | } 25 |
10 |
11 | 
12 |
17 | )
18 | }
19 | }
20 |
21 | User.propTypes = {
22 | user: PropTypes.shape({
23 | login: PropTypes.string.isRequired,
24 | avatarUrl: PropTypes.string.isRequired,
25 | name: PropTypes.string
26 | }).isRequired
27 | }
28 |
--------------------------------------------------------------------------------
/examples/real-world/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 | constructor(props) {
9 | super(props)
10 | this.handleChange = this.handleChange.bind(this)
11 | this.handleDismissClick = this.handleDismissClick.bind(this)
12 | }
13 |
14 | handleDismissClick(e) {
15 | this.props.resetErrorMessage()
16 | e.preventDefault()
17 | }
18 |
19 | handleChange(nextValue) {
20 | browserHistory.push(`/${nextValue}`)
21 | }
22 |
23 | renderErrorMessage() {
24 | const { errorMessage } = this.props
25 | if (!errorMessage) {
26 | return null
27 | }
28 |
29 | return (
30 | 13 | {login} {name && ({name})} 14 |
15 | 16 |31 | {errorMessage} 32 | {' '} 33 | ( 35 | Dismiss 36 | ) 37 |
38 | ) 39 | } 40 | 41 | render() { 42 | const { children, inputValue } = this.props 43 | return ( 44 |
45 |
48 | {this.renderErrorMessage()} 49 | {children} 50 |
51 | )
52 | }
53 | }
54 |
55 | App.propTypes = {
56 | // Injected by React Redux
57 | errorMessage: PropTypes.string,
58 | resetErrorMessage: PropTypes.func.isRequired,
59 | inputValue: PropTypes.string.isRequired,
60 | // Injected by React Router
61 | children: PropTypes.node
62 | }
63 |
64 | function mapStateToProps(state, ownProps) {
65 | return {
66 | errorMessage: state.errorMessage,
67 | inputValue: ownProps.location.pathname.substring(1)
68 | }
69 | }
70 |
71 | export default connect(mapStateToProps, {
72 | resetErrorMessage
73 | })(App)
74 |
--------------------------------------------------------------------------------
/examples/real-world/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 | 48 | {this.renderErrorMessage()} 49 | {children} 50 |
Loading {name} details...
46 | } 47 | 48 | const { stargazers, stargazersPagination } = this.props 49 | return ( 50 |
51 |
54 |
60 | )
61 | }
62 | }
63 |
64 | RepoPage.propTypes = {
65 | repo: PropTypes.object,
66 | fullName: PropTypes.string.isRequired,
67 | name: PropTypes.string.isRequired,
68 | owner: PropTypes.object,
69 | stargazers: PropTypes.array.isRequired,
70 | stargazersPagination: PropTypes.object,
71 | loadRepo: PropTypes.func.isRequired,
72 | loadStargazers: PropTypes.func.isRequired
73 | }
74 |
75 | function mapStateToProps(state, ownProps) {
76 | const { login, name } = ownProps.params
77 | const {
78 | pagination: { stargazersByRepo },
79 | entities: { users, repos }
80 | } = state
81 |
82 | const fullName = `${login}/${name}`
83 | const stargazersPagination = stargazersByRepo[fullName] || { ids: [] }
84 | const stargazers = stargazersPagination.ids.map(id => users[id])
85 |
86 | return {
87 | fullName,
88 | name,
89 | stargazers,
90 | stargazersPagination,
91 | repo: repos[fullName],
92 | owner: users[login]
93 | }
94 | }
95 |
96 | export default connect(mapStateToProps, {
97 | loadRepo,
98 | loadStargazers
99 | })(RepoPage)
100 |
--------------------------------------------------------------------------------
/examples/real-world/containers/Root.dev.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { Provider } from 'react-redux'
3 | import routes from '../routes'
4 | import DevTools from './DevTools'
5 | import { Router } from 'react-router'
6 |
7 | export default class Root extends Component {
8 | render() {
9 | const { store, history } = this.props
10 | return (
11 | 54 |
13 |
16 | Loading {login}’s profile...
48 | } 49 | 50 | const { starredRepos, starredRepoOwners, starredPagination } = this.props 51 | return ( 52 |
53 |
55 |
61 | )
62 | }
63 | }
64 |
65 | UserPage.propTypes = {
66 | login: PropTypes.string.isRequired,
67 | user: PropTypes.object,
68 | starredPagination: PropTypes.object,
69 | starredRepos: PropTypes.array.isRequired,
70 | starredRepoOwners: PropTypes.array.isRequired,
71 | loadUser: PropTypes.func.isRequired,
72 | loadStarred: PropTypes.func.isRequired
73 | }
74 |
75 | function mapStateToProps(state, ownProps) {
76 | const { login } = ownProps.params
77 | const {
78 | pagination: { starredByUser },
79 | entities: { users, repos }
80 | } = state
81 |
82 | const starredPagination = starredByUser[login] || { ids: [] }
83 | const starredRepos = starredPagination.ids.map(id => repos[id])
84 | const starredRepoOwners = starredRepos.map(repo => users[repo.owner])
85 |
86 | return {
87 | login,
88 | starredRepos,
89 | starredRepoOwners,
90 | starredPagination,
91 | user: users[login]
92 | }
93 | }
94 |
95 | export default connect(mapStateToProps, {
96 | loadUser,
97 | loadStarred
98 | })(UserPage)
99 |
--------------------------------------------------------------------------------
/examples/real-world/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 55 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/examples/real-world/index.js:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill'
2 | import React from 'react'
3 | import { render } from 'react-dom'
4 | import { browserHistory } from 'react-router'
5 | import { syncHistoryWithStore } from 'react-router-redux'
6 | import Root from './containers/Root'
7 | import configureStore from './store/configureStore'
8 |
9 | const store = configureStore()
10 | const history = syncHistoryWithStore(browserHistory, store)
11 |
12 | render(
13 |
21 |
29 | )
30 | }
31 | }
32 |
33 | Cart.propTypes = {
34 | products: PropTypes.array,
35 | total: PropTypes.string,
36 | onCheckoutClicked: PropTypes.func
37 | }
38 |
--------------------------------------------------------------------------------
/examples/shopping-cart/components/Product.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 |
3 | export default class Product extends Component {
4 | render() {
5 | const { price, quantity, title } = this.props
6 | return Your Cart
22 |{nodes}
23 | Total: ${total}
24 | 28 | {title} - ${price} {quantity ? `x ${quantity}` : null}
7 | }
8 | }
9 |
10 | Product.propTypes = {
11 | price: PropTypes.number,
12 | quantity: PropTypes.number,
13 | title: PropTypes.string
14 | }
15 |
--------------------------------------------------------------------------------
/examples/shopping-cart/components/ProductItem.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import Product from './Product'
3 |
4 | export default class ProductItem extends Component {
5 | render() {
6 | const { product } = this.props
7 |
8 | return (
9 |
11 |
20 | )
21 | }
22 | }
23 |
24 | ProductItem.propTypes = {
25 | product: PropTypes.shape({
26 | title: PropTypes.string.isRequired,
27 | price: PropTypes.number.isRequired,
28 | inventory: PropTypes.number.isRequired
29 | }).isRequired,
30 | onAddToCartClicked: PropTypes.func.isRequired
31 | }
32 |
--------------------------------------------------------------------------------
/examples/shopping-cart/components/ProductsList.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 |
3 | export default class ProductsList extends Component {
4 | render() {
5 | return (
6 |
7 |
10 | )
11 | }
12 | }
13 |
14 | ProductsList.propTypes = {
15 | children: PropTypes.node,
16 | title: PropTypes.string.isRequired
17 | }
18 |
--------------------------------------------------------------------------------
/examples/shopping-cart/constants/ActionTypes.js:
--------------------------------------------------------------------------------
1 | export const ADD_TO_CART = 'ADD_TO_CART'
2 | export const CHECKOUT_REQUEST = 'CHECKOUT_REQUEST'
3 | export const CHECKOUT_SUCCESS = 'CHECKOUT_SUCCESS'
4 | export const CHECKOUT_FAILURE = 'CHECKOUT_FAILURE'
5 | export const RECEIVE_PRODUCTS = 'RECEIVE_PRODUCTS'
6 |
--------------------------------------------------------------------------------
/examples/shopping-cart/containers/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import ProductsContainer from './ProductsContainer'
3 | import CartContainer from './CartContainer'
4 |
5 | export default class App extends Component {
6 | render() {
7 | return (
8 | {this.props.title}
8 |{this.props.children}
9 |
9 |
11 |
13 |
15 | )
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/examples/shopping-cart/containers/CartContainer.js:
--------------------------------------------------------------------------------
1 | import React, { Component, 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 | class CartContainer extends Component {
8 | render() {
9 | const { products, total } = this.props
10 |
11 | return (
12 | Shopping Cart Example
10 |11 |
13 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/examples/shopping-cart/index.js:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill'
2 | import React from 'react'
3 | import { render } from 'react-dom'
4 | import { createStore, applyMiddleware } from 'redux'
5 | import { Provider } from 'react-redux'
6 | import logger from 'redux-logger'
7 | import thunk from 'redux-thunk'
8 | import reducer from './reducers'
9 | import { getAllProducts } from './actions'
10 | import App from './containers/App'
11 |
12 | const middleware = process.env.NODE_ENV === 'production' ?
13 | [ thunk ] :
14 | [ thunk, logger() ]
15 |
16 | const store = createStore(
17 | reducer,
18 | applyMiddleware(...middleware)
19 | )
20 |
21 | store.dispatch(getAllProducts())
22 |
23 | render(
24 | todos
15 |-
68 | {filteredTodos.map(todo =>
69 |
39 | completeTodo(todo.id)} />
43 |
46 |
49 | )
50 | }
51 |
52 | return (
53 |
13 |
16 | )
17 | }
18 | }
19 |
20 | App.propTypes = {
21 | todos: PropTypes.array.isRequired,
22 | actions: PropTypes.object.isRequired
23 | }
24 |
25 | function mapStateToProps(state) {
26 | return {
27 | todos: state.todos
28 | }
29 | }
30 |
31 | function mapDispatchToProps(dispatch) {
32 | return {
33 | actions: bindActionCreators(TodoActions, dispatch)
34 | }
35 | }
36 |
37 | export default connect(
38 | mapStateToProps,
39 | mapDispatchToProps
40 | )(App)
41 |
--------------------------------------------------------------------------------
/examples/todomvc/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/examples/todomvc/index.js:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill'
2 | import React from 'react'
3 | import { render } from 'react-dom'
4 | import { Provider } from 'react-redux'
5 | import App from './containers/App'
6 | import configureStore from './store/configureStore'
7 | import 'todomvc-app-css/index.css'
8 |
9 | const store = configureStore()
10 |
11 | render(
12 |
9 |
14 | )
15 |
16 | export default App
17 |
--------------------------------------------------------------------------------
/examples/todos-with-undo/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/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 | return {
7 | active: ownProps.filter === state.visibilityFilter
8 | }
9 | }
10 |
11 | const mapDispatchToProps = (dispatch, ownProps) => {
12 | return {
13 | onClick: () => {
14 | dispatch(setVisibilityFilter(ownProps.filter))
15 | }
16 | }
17 | }
18 |
19 | const FilterLink = connect(
20 | mapStateToProps,
21 | mapDispatchToProps
22 | )(Link)
23 |
24 | export default FilterLink
25 |
--------------------------------------------------------------------------------
/examples/todos-with-undo/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 | return { 18 | canUndo: state.todos.past.length > 0, 19 | canRedo: state.todos.future.length > 0 20 | } 21 | } 22 | 23 | const mapDispatchToProps = (dispatch) => { 24 | return { 25 | onUndo: () => dispatch(UndoActionCreators.undo()), 26 | onRedo: () => dispatch(UndoActionCreators.redo()) 27 | } 28 | } 29 | 30 | UndoRedo = connect( 31 | mapStateToProps, 32 | mapDispatchToProps 33 | )(UndoRedo) 34 | 35 | export default UndoRedo 36 | -------------------------------------------------------------------------------- /examples/todos-with-undo/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 | } 14 | } 15 | 16 | const mapStateToProps = (state) => { 17 | return { 18 | todos: getVisibleTodos(state.todos.present, state.visibilityFilter) 19 | } 20 | } 21 | 22 | const mapDispatchToProps = (dispatch) => { 23 | return { 24 | onTodoClick: (id) => { 25 | dispatch(toggleTodo(id)) 26 | } 27 | } 28 | } 29 | 30 | const VisibleTodoList = connect( 31 | mapStateToProps, 32 | mapDispatchToProps 33 | )(TodoList) 34 | 35 | export default VisibleTodoList 36 | -------------------------------------------------------------------------------- /examples/todos-with-undo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/examples/todos-with-undo/index.js:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill'
2 | import React from 'react'
3 | import { render } from 'react-dom'
4 | import { createStore } from 'redux'
5 | import { Provider } from 'react-redux'
6 | import App from './components/App'
7 | import todoApp from './reducers'
8 |
9 | const store = createStore(todoApp)
10 |
11 | const rootElement = document.getElementById('root')
12 | render(
13 |
9 |
24 |
25 | )
26 | }
27 |
28 | export default AddTodoForm
29 |
--------------------------------------------------------------------------------
/examples/todos/components/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Footer from './Footer'
3 | import AddTodo from '../containers/AddTodo'
4 | import VisibleTodoList from '../containers/VisibleTodoList'
5 |
6 | const App = () => (
7 |
8 |
12 | )
13 |
14 | export default App
15 |
--------------------------------------------------------------------------------
/examples/todos/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 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/examples/todos/index.js:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill'
2 | import React from 'react'
3 | import { render } from 'react-dom'
4 | import { Provider } from 'react-redux'
5 | import { createStore } from 'redux'
6 | import todoApp from './reducers'
7 | import App from './components/App'
8 |
9 | let store = createStore(todoApp)
10 |
11 | render(
12 |
49 | Counter: {counter}
50 | {' '}
51 |
54 | {' '}
55 | {typeof parentId !== 'undefined' ?
56 |
58 | ×
59 | :
60 | null
61 | }
62 |
71 | )
72 | }
73 | }
74 |
75 | function mapStateToProps(state, ownProps) {
76 | return state[ownProps.id]
77 | }
78 |
79 | const ConnectedNode = connect(mapStateToProps, actions)(Node)
80 | export default ConnectedNode
81 |
--------------------------------------------------------------------------------
/examples/tree-view/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/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | -
63 | {childIds.map(this.renderChild)}
64 |
- 65 | 66 | Add child 67 | 68 | 69 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/examples/tree-view/index.js:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill'
2 | import React from 'react'
3 | import { render } from 'react-dom'
4 | import { Provider } from 'react-redux'
5 | import Node from './containers/Node'
6 | import configureStore from './store/configureStore'
7 | import generateTree from './generateTree'
8 |
9 | const tree = generateTree()
10 | const store = configureStore(tree)
11 |
12 | render(
13 | 8 | Clicked: {counter} times 9 | {' '} 10 | 11 | {' '} 12 | 13 | {' '} 14 | 15 | {' '} 16 | 17 |
18 | ) 19 | } 20 | } 21 | 22 | Counter.propTypes = { 23 | increment: PropTypes.func.isRequired, 24 | incrementIfOdd: PropTypes.func.isRequired, 25 | incrementAsync: PropTypes.func.isRequired, 26 | decrement: PropTypes.func.isRequired, 27 | counter: PropTypes.number.isRequired 28 | } 29 | 30 | export default Counter 31 | -------------------------------------------------------------------------------- /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 | function mapStateToProps(state) { 7 | return { 8 | counter: state.counter 9 | } 10 | } 11 | 12 | function mapDispatchToProps(dispatch) { 13 | return bindActionCreators(CounterActions, dispatch) 14 | } 15 | 16 | export default connect(mapStateToProps, mapDispatchToProps)(Counter) 17 | -------------------------------------------------------------------------------- /examples/universal/common/reducers/counter.js: -------------------------------------------------------------------------------- 1 | import { SET_COUNTER, INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions' 2 | 3 | export default function 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 | -------------------------------------------------------------------------------- /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 | export default function configureStore(initialState) { 6 | const store = createStore( 7 | rootReducer, 8 | initialState, 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 | -------------------------------------------------------------------------------- /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.0.1", 35 | "babel-runtime": "^6.3.13", 36 | "webpack": "^1.11.0", 37 | "webpack-dev-middleware": "^1.4.0", 38 | "webpack-hot-middleware": "^2.6.0" 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 initialState = { counter } 40 | 41 | // Create a new Redux store instance 42 | const store = configureStore(initialState) 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.OccurenceOrderPlugin(),
17 | new webpack.HotModuleReplacementPlugin(),
18 | new webpack.NoErrorsPlugin()
19 | ],
20 | module: {
21 | loaders: [
22 | {
23 | test: /\.js$/,
24 | loader: 'babel',
25 | exclude: /node_modules/,
26 | include: __dirname,
27 | query: {
28 | presets: [ 'react-hmre' ]
29 | }
30 | }
31 | ]
32 | }
33 | }
34 |
35 | // When inside Redux repo, prefer src to compiled version.
36 | // You can safely delete these lines in your project.
37 | var reduxSrc = path.join(__dirname, '..', '..', 'src')
38 | var reduxNodeModules = path.join(__dirname, '..', '..', 'node_modules')
39 | var fs = require('fs')
40 | if (fs.existsSync(reduxSrc) && fs.existsSync(reduxNodeModules)) {
41 | // Resolve Redux to source
42 | module.exports.resolve = { alias: { 'redux': reduxSrc } }
43 | // Our root .babelrc needs this flag for CommonJS output
44 | process.env.BABEL_ENV = 'commonjs'
45 | // Compile Redux from source
46 | module.exports.module.loaders.push({
47 | test: /\.js$/,
48 | loaders: [ 'babel' ],
49 | include: reduxSrc,
50 | })
51 | }
52 |
--------------------------------------------------------------------------------
/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, initialState, enhancer) => {
21 | var store = createStore(reducer, initialState, 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 | return (...args) => {
14 | if (funcs.length === 0) {
15 | return args[0]
16 | }
17 |
18 | const last = funcs[funcs.length - 1]
19 | const rest = funcs.slice(0, -1)
20 |
21 | return rest.reduceRight((composed, f) => f(composed), last(...args))
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/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 you can use this stack
15 | // to find the callsite that caused this warning to fire.
16 | throw new Error(message)
17 | /* eslint-disable no-empty */
18 | } catch (e) { }
19 | /* eslint-enable no-empty */
20 | }
21 |
--------------------------------------------------------------------------------
/test/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "mocha": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/test/applyMiddleware.spec.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect'
2 | import { createStore, applyMiddleware } from '../src/index'
3 | import * as reducers from './helpers/reducers'
4 | import { addTodo, addTodoAsync, addTodoIfEmpty } from './helpers/actionCreators'
5 | import { thunk } from './helpers/middleware'
6 |
7 | describe('applyMiddleware', () => {
8 | it('wraps dispatch method with middleware once', () => {
9 | function test(spyOnMethods) {
10 | return methods => {
11 | spyOnMethods(methods)
12 | return next => action => next(action)
13 | }
14 | }
15 |
16 | const spy = expect.createSpy(() => {})
17 | const store = applyMiddleware(test(spy), thunk)(createStore)(reducers.todos)
18 |
19 | store.dispatch(addTodo('Use Redux'))
20 | store.dispatch(addTodo('Flux FTW!'))
21 |
22 | expect(spy.calls.length).toEqual(1)
23 |
24 | expect(Object.keys(spy.calls[0].arguments[0])).toEqual([
25 | 'getState',
26 | 'dispatch'
27 | ])
28 |
29 | expect(store.getState()).toEqual([ { id: 1, text: 'Use Redux' }, { id: 2, text: 'Flux FTW!' } ])
30 | })
31 |
32 | it('passes recursive dispatches through the middleware chain', () => {
33 | function test(spyOnMethods) {
34 | return () => next => action => {
35 | spyOnMethods(action)
36 | return next(action)
37 | }
38 | }
39 |
40 | const spy = expect.createSpy(() => {})
41 | const store = applyMiddleware(test(spy), thunk)(createStore)(reducers.todos)
42 |
43 | return store.dispatch(addTodoAsync('Use Redux')).then(() => {
44 | expect(spy.calls.length).toEqual(2)
45 | })
46 | })
47 |
48 | it('works with thunk middleware', done => {
49 | const store = applyMiddleware(thunk)(createStore)(reducers.todos)
50 |
51 | store.dispatch(addTodoIfEmpty('Hello'))
52 | expect(store.getState()).toEqual([
53 | {
54 | id: 1,
55 | text: 'Hello'
56 | }
57 | ])
58 |
59 | store.dispatch(addTodoIfEmpty('Hello'))
60 | expect(store.getState()).toEqual([
61 | {
62 | id: 1,
63 | text: 'Hello'
64 | }
65 | ])
66 |
67 | store.dispatch(addTodo('World'))
68 | expect(store.getState()).toEqual([
69 | {
70 | id: 1,
71 | text: 'Hello'
72 | },
73 | {
74 | id: 2,
75 | text: 'World'
76 | }
77 | ])
78 |
79 | store.dispatch(addTodoAsync('Maybe')).then(() => {
80 | expect(store.getState()).toEqual([
81 | {
82 | id: 1,
83 | text: 'Hello'
84 | },
85 | {
86 | id: 2,
87 | text: 'World'
88 | },
89 | {
90 | id: 3,
91 | text: 'Maybe'
92 | }
93 | ])
94 | done()
95 | })
96 | })
97 | })
98 |
--------------------------------------------------------------------------------
/test/bindActionCreators.spec.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect'
2 | import { bindActionCreators, createStore } from '../src'
3 | import { todos } from './helpers/reducers'
4 | import * as actionCreators from './helpers/actionCreators'
5 |
6 | describe('bindActionCreators', () => {
7 | let store
8 | let actionCreatorFunctions
9 |
10 | beforeEach(() => {
11 | store = createStore(todos)
12 | actionCreatorFunctions = { ...actionCreators }
13 | Object.keys(actionCreatorFunctions).forEach(key => {
14 | if (typeof actionCreatorFunctions[key] !== 'function') {
15 | delete actionCreatorFunctions[key]
16 | }
17 | })
18 | })
19 |
20 | it('wraps the action creators with the dispatch function', () => {
21 | const boundActionCreators = bindActionCreators(actionCreators, store.dispatch)
22 | expect(
23 | Object.keys(boundActionCreators)
24 | ).toEqual(
25 | Object.keys(actionCreatorFunctions)
26 | )
27 |
28 | const action = boundActionCreators.addTodo('Hello')
29 | expect(action).toEqual(
30 | actionCreators.addTodo('Hello')
31 | )
32 | expect(store.getState()).toEqual([
33 | { id: 1, text: 'Hello' }
34 | ])
35 | })
36 |
37 | it('skips non-function values in the passed object', () => {
38 | const boundActionCreators = bindActionCreators({
39 | ...actionCreators,
40 | foo: 42,
41 | bar: 'baz',
42 | wow: undefined,
43 | much: {},
44 | test: null
45 | }, store.dispatch)
46 | expect(
47 | Object.keys(boundActionCreators)
48 | ).toEqual(
49 | Object.keys(actionCreatorFunctions)
50 | )
51 | })
52 |
53 | it('supports wrapping a single function only', () => {
54 | const actionCreator = actionCreators.addTodo
55 | const boundActionCreator = bindActionCreators(actionCreator, store.dispatch)
56 |
57 | const action = boundActionCreator('Hello')
58 | expect(action).toEqual(actionCreator('Hello'))
59 | expect(store.getState()).toEqual([
60 | { id: 1, text: 'Hello' }
61 | ])
62 | })
63 |
64 | it('throws for an undefined actionCreator', () => {
65 | expect(() => {
66 | bindActionCreators(undefined, store.dispatch)
67 | }).toThrow(
68 | 'bindActionCreators expected an object or a function, instead received undefined. ' +
69 | 'Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?'
70 | )
71 | })
72 |
73 | it('throws for a null actionCreator', () => {
74 | expect(() => {
75 | bindActionCreators(null, store.dispatch)
76 | }).toThrow(
77 | 'bindActionCreators expected an object or a function, instead received null. ' +
78 | 'Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?'
79 | )
80 | })
81 |
82 | it('throws for a primitive actionCreator', () => {
83 | expect(() => {
84 | bindActionCreators('string', store.dispatch)
85 | }).toThrow(
86 | 'bindActionCreators expected an object or a function, instead received string. ' +
87 | 'Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?'
88 | )
89 | })
90 | })
91 |
--------------------------------------------------------------------------------
/test/compose.spec.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect'
2 | import { compose } from '../src'
3 |
4 | describe('Utils', () => {
5 | describe('compose', () => {
6 | it('composes from right to left', () => {
7 | const double = x => x * 2
8 | const square = x => x * x
9 | expect(compose(square)(5)).toBe(25)
10 | expect(compose(square, double)(5)).toBe(100)
11 | expect(compose(double, square, double)(5)).toBe(200)
12 | })
13 |
14 | it('composes functions from right to left', () => {
15 | const a = next => x => next(x + 'a')
16 | const b = next => x => next(x + 'b')
17 | const c = next => x => next(x + 'c')
18 | const final = x => x
19 |
20 | expect(compose(a, b, c)(final)('')).toBe('abc')
21 | expect(compose(b, c, a)(final)('')).toBe('bca')
22 | expect(compose(c, a, b)(final)('')).toBe('cab')
23 | })
24 |
25 | it('can be seeded with multiple arguments', () => {
26 | const square = x => x * x
27 | const add = (x, y) => x + y
28 | expect(compose(square, add)(1, 2)).toBe(9)
29 | })
30 |
31 | it('returns the first given argument if given no functions', () => {
32 | expect(compose()(1, 2)).toBe(1)
33 | expect(compose()(3)).toBe(3)
34 | expect(compose()()).toBe(undefined)
35 | })
36 | })
37 | })
38 |
--------------------------------------------------------------------------------
/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/utils/warning.spec.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect'
2 | import warning from '../../src/utils/warning'
3 |
4 | describe('Utils', () => {
5 | describe('warning', () => {
6 | it('calls console.error when available', () => {
7 | const spy = expect.spyOn(console, 'error')
8 | try {
9 | warning('Test')
10 | expect(spy.calls[0].arguments[0]).toBe('Test')
11 | } finally {
12 | spy.restore()
13 | }
14 | })
15 |
16 | it('does not throw when console.error is not available', () => {
17 | const realConsole = global.console
18 | Object.defineProperty(global, 'console', { value: {} })
19 | try {
20 | expect(() => warning('Test')).toNotThrow()
21 | } finally {
22 | Object.defineProperty(global, 'console', { value: realConsole })
23 | }
24 | })
25 |
26 | it('does not throw when console is not available', () => {
27 | const realConsole = global.console
28 | Object.defineProperty(global, 'console', { value: undefined })
29 | try {
30 | expect(() => warning('Test')).toNotThrow()
31 | } finally {
32 | Object.defineProperty(global, 'console', { value: realConsole })
33 | }
34 | })
35 | })
36 | })
37 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var webpack = require('webpack')
4 |
5 | var env = process.env.NODE_ENV
6 | var config = {
7 | module: {
8 | loaders: [
9 | { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ }
10 | ]
11 | },
12 | output: {
13 | library: 'Redux',
14 | libraryTarget: 'umd'
15 | },
16 | plugins: [
17 | new webpack.optimize.OccurenceOrderPlugin(),
18 | new webpack.DefinePlugin({
19 | 'process.env.NODE_ENV': JSON.stringify(env)
20 | })
21 | ]
22 | };
23 |
24 | if (env === 'production') {
25 | config.plugins.push(
26 | new webpack.optimize.UglifyJsPlugin({
27 | compressor: {
28 | pure_getters: true,
29 | unsafe: true,
30 | unsafe_comps: true,
31 | screw_ie8: true,
32 | warnings: false
33 | }
34 | })
35 | )
36 | }
37 |
38 | module.exports = config
39 |
--------------------------------------------------------------------------------