60 |
61 | 在我們開始撰寫 UI 之前，我們已經設定了應用程式的行為。在這個時間點，你已經可以為你的 reducer 和 action creator 撰寫測試，不過我們不會在這個教學中這樣做。你不需要 mock 任何東西，因為他們只是 function。呼叫它們，然後對它們回傳的東西做出 assertion。
62 |
63 | ## 原始碼
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 | ## 下一步
75 |
76 | 在為我們的 todo 應用程式建立 UI 之前，我們將會繞道看看[資料在 Redux 應用程式中如何流動](DataFlow.md)。
77 |
--------------------------------------------------------------------------------
/docs/introduction/Motivation.md:
--------------------------------------------------------------------------------
1 | # 動機
2 |
3 | 隨著對 JavaScript single-page 應用程式的要求變得越來愈複雜，**我們的程式碼必須管理高於以往的 state**。這些 state 可以包括伺服器回應和快取的資料，以及本地端建立而尚未保存到伺服器的資料。UI state 也越來愈複雜，因為我們需要管理 active route、被選擇的 tab、是否要顯示 spinner、 pagination 控制應不應該被顯示，等等。
4 |
5 | 管理這個不斷變化的 state 是很困難的。如果一個 model 可以更新其他的 model，接著一個 view 可以更新一個 model，而它更新了另一個 model，而這個順帶的，可能造成另一個 view 被更新。到了某個時間點，你不再了解你的應用程式中發生了些什麼，因為你已經**失去對 state 何時、為什麼、如何運作的控制權。**當系統不透明且充滿不確定性，就很難去重現 bug 或添加新的功能。
6 |
7 | 彷彿這樣還不夠糟糕，試想一些**在前端產品開發越來越普遍的新需求**。作為開發者，我們被期望要去處理 optimistic update、伺服器端 render、在轉換 route 前抓取資料，等等。我們發現自己嘗試去管理一個從來沒有處理過的複雜度，我們不免會有這樣的疑問：[是時候該放棄了嗎？](http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html) 答案是_不_。
8 |
9 | 這樣的複雜度很難去處理，因為 **我們混合了兩個概念**，它們都是人類的頭腦非常難去思考的概念：**變更和非同步。**我稱它們為 [Mentos and Coke](https://en.wikipedia.org/wiki/Diet_Coke_and_Mentos_eruption)。分開都好好的，但混在一起就變成一團糟。[React](http://facebook.github.io/react) 之類的 Library 試圖藉由移除非同步和直接的 DOM 操作，來在 view layer 解決這個問題。但是，管理資料 state 的部分留下來讓你自己決定。這就是 Redux 的切入點。
10 |
11 | 跟隨著 [Flux](http://facebook.github.io/flux)、[CQRS](http://martinfowler.com/bliki/CQRS.html) 和 [Event Sourcing](http://martinfowler.com/eaaDev/EventSourcing.html) 的腳步，Redux 藉由強加某些限制在更新發生的方式和時機上，**試圖讓 state 的變化更有可預測性**。這些限制都反應在 Redux 的[三大原則](ThreePrinciples.md)中。
12 |
--------------------------------------------------------------------------------
/docs/introduction/README.md:
--------------------------------------------------------------------------------
1 | ## 介紹
2 |
3 | * [動機](Motivation.md)
4 | * [三大原則](ThreePrinciples.md)
5 | * [先前技術](PriorArt.md)
6 | * [生態系](Ecosystem.md)
7 | * [範例](Examples.md)
8 |
--------------------------------------------------------------------------------
/docs/introduction/ThreePrinciples.md:
--------------------------------------------------------------------------------
1 | # 三大原則
2 |
3 | Redux 可以用三個基本的原則來描述：
4 |
5 | ### 唯一真相來源
6 |
7 | **你整個應用程式的 [state](../Glossary.md#state)，被儲存在一個樹狀物件放在唯一的 [store](../Glossary.md#store) 裡面。**
8 |
9 | 這讓建立 universal 應用程式變得更簡單，因為從伺服器來的 state 可以被 serialize 並 hydrate 進去客戶端，而不需要撰寫其他額外的程式碼。一個單一的 state tree 也讓 debug 或是調試一個應用程式更容易；它也讓你在開發期間保存應用程式的 state，以求更快的開發週期。一些傳統很難實作的功能 - 例如，復原/重做 - 可以突然變得很容易實作，如果你所有的 state 都被儲存在單一一個 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 是唯讀的
32 |
33 | **改變 state 的唯一的方式是發出一個 [action](../Glossary.md#action)，也就是一個描述發生什麼事的物件。**
34 |
35 | 這能確保 view 和網路 callback 都不會直接寫入 state。替代的，它們表達了一個改變 state 的意圖。因為所有的改變都是集中的，並依照嚴格的順序一個接一個的發生，沒有需要特別注意的微妙 race condition。因為 Action 只是普通物件，所以它們可以被記錄、serialize、儲存、並在之後為了 debug 或測試目的而重播。
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 | ### 變更被寫成 pure function
50 |
51 | **要指定 state tree 如何藉由 action 來轉變，你必須撰寫 pure [reducer](../Glossary.md#reducer)。**
52 |
53 | Reducer 只是 pure function，它取得先前的 state 和一個 action，並回傳下一個 state。請記得要回傳一個新的 state 物件，而不要去改變先前的 state。你可以從單一一個 reducer 開始，而隨著你的應用程式成長，把它們拆分成比較小的 reducer 來管理 state tree 中的特定部分。因為 reducer 只是 function，你可以控制它們被呼叫的順序、傳遞額外的資料、或甚至建立可重用的 reducer 來做一些常見的任務，例如 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 state.map((todo, index) => {
78 | if (index === action.index) {
79 | return Object.assign({}, todo, {
80 | completed: true
81 | })
82 | }
83 | return todo
84 | })
85 | default:
86 | return state
87 | }
88 | }
89 |
90 | import { combineReducers, createStore } from 'redux'
91 | let reducer = combineReducers({ visibilityFilter, todos })
92 | let store = createStore(reducer)
93 | ```
94 |
95 | 就這樣！現在你已經知道 Redux 都是些什麼了。
96 |
--------------------------------------------------------------------------------
/docs/recipes/IsolatingSubapps.md:
--------------------------------------------------------------------------------
1 | # 分隔 Redux 子應用程式
2 |
3 | 試想一個嵌入較小的「子應用程式」(被裝在 `
13 |
17 | )
18 | }
19 | }
20 | ```
21 |
22 | 這些 `{value}
10 | 18 | 19 | ) 20 | } 21 | } 22 | 23 | Picker.propTypes = { 24 | options: PropTypes.arrayOf( 25 | PropTypes.string.isRequired 26 | ).isRequired, 27 | value: PropTypes.string.isRequired, 28 | onChange: PropTypes.func.isRequired 29 | } 30 | -------------------------------------------------------------------------------- /examples/async/components/Posts.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes, Component } from 'react' 2 | 3 | export default class Posts extends Component { 4 | render() { 5 | return ( 6 |-
7 | {this.props.posts.map((post, i) =>
8 |
- {post.title} 9 | )} 10 |
43 |
67 | )
68 | }
69 | }
70 |
71 | App.propTypes = {
72 | selectedReddit: PropTypes.string.isRequired,
73 | posts: PropTypes.array.isRequired,
74 | isFetching: PropTypes.bool.isRequired,
75 | lastUpdated: PropTypes.number,
76 | dispatch: PropTypes.func.isRequired
77 | }
78 |
79 | function mapStateToProps(state) {
80 | const { selectedReddit, postsByReddit } = state
81 | const {
82 | isFetching,
83 | lastUpdated,
84 | items: posts
85 | } = postsByReddit[selectedReddit] || {
86 | isFetching: true,
87 | items: []
88 | }
89 |
90 | return {
91 | selectedReddit,
92 | posts,
93 | isFetching,
94 | lastUpdated
95 | }
96 | }
97 |
98 | export default connect(mapStateToProps)(App)
99 |
--------------------------------------------------------------------------------
/examples/async/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 47 | {lastUpdated && 48 | 49 | Last updated at {new Date(lastUpdated).toLocaleTimeString()}. 50 | {' '} 51 | 52 | } 53 | {!isFetching && 54 | 56 | Refresh 57 | 58 | } 59 |
60 | {isEmpty 61 | ? (isFetching ?Loading...
:Empty.
) 62 | :
63 |
65 | }
66 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/examples/async/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 |
8 | const store = configureStore()
9 |
10 | render(
11 |
9 |
17 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/examples/counter/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react"],
3 | "env": {
4 | "development": {
5 | "presets": ["react-hmre"]
6 | }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/examples/counter/components/Counter.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 |
3 | class Counter extends Component {
4 | constructor(props) {
5 | super(props)
6 | this.incrementAsync = this.incrementAsync.bind(this)
7 | this.incrementIfOdd = this.incrementIfOdd.bind(this)
8 | }
9 |
10 | incrementIfOdd() {
11 | if (this.props.value % 2 !== 0) {
12 | this.props.onIncrement()
13 | }
14 | }
15 |
16 | incrementAsync() {
17 | setTimeout(this.props.onIncrement, 1000)
18 | }
19 |
20 | render() {
21 | const { value, onIncrement, onDecrement } = this.props
22 | return (
23 | 10 | Clicked: 0 times 11 | 12 | 13 | 14 | 15 |
16 |24 | Clicked: {value} times 25 | {' '} 26 | 29 | {' '} 30 | 33 | {' '} 34 | 37 | {' '} 38 | 41 |
42 | ) 43 | } 44 | } 45 | 46 | Counter.propTypes = { 47 | value: PropTypes.number.isRequired, 48 | onIncrement: PropTypes.func.isRequired, 49 | onDecrement: PropTypes.func.isRequired 50 | } 51 | 52 | export default Counter 53 | -------------------------------------------------------------------------------- /examples/counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/examples/counter/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import { createStore } from 'redux'
4 | import Counter from './components/Counter'
5 | import counter from './reducers'
6 |
7 | const store = createStore(counter)
8 | const rootEl = document.getElementById('root')
9 |
10 | function render() {
11 | ReactDOM.render(
12 |
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 |
13 |
16 |
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 |
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 |
10 |
25 |
26 | )
27 | }
28 | AddTodo = connect()(AddTodo)
29 |
30 | export default AddTodo
31 |
--------------------------------------------------------------------------------
/examples/todos/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/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, 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/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
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(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 | -------------------------------------------------------------------------------- /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 |
--------------------------------------------------------------------------------
/logo/README.md:
--------------------------------------------------------------------------------
1 | # The Redux Logo
2 |
3 | This is the only official Redux logo.
4 | Don’t use any other logos to represent Redux.
5 |
6 | It comes in several flavors.
7 |
8 | ## Just the Logo
9 |
10 | 
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/chentsulin/redux/43ce29ea13cac12bd66b965dcf4f4a14b0657450/logo/apple-touch-icon.png
--------------------------------------------------------------------------------
/logo/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chentsulin/redux/43ce29ea13cac12bd66b965dcf4f4a14b0657450/logo/favicon.ico
--------------------------------------------------------------------------------
/logo/logo-title-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chentsulin/redux/43ce29ea13cac12bd66b965dcf4f4a14b0657450/logo/logo-title-dark.png
--------------------------------------------------------------------------------
/logo/logo-title-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chentsulin/redux/43ce29ea13cac12bd66b965dcf4f4a14b0657450/logo/logo-title-light.png
--------------------------------------------------------------------------------
/logo/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chentsulin/redux/43ce29ea13cac12bd66b965dcf4f4a14b0657450/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 | "mocha": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/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 | it('returns the first function if given only one', () => {
38 | const fn = () => {}
39 |
40 | expect(compose(fn)).toBe(fn)
41 | })
42 | })
43 | })
44 |
--------------------------------------------------------------------------------
/test/helpers/actionCreators.js:
--------------------------------------------------------------------------------
1 | import {
2 | ADD_TODO,
3 | DISPATCH_IN_MIDDLE,
4 | GET_STATE_IN_MIDDLE,
5 | SUBSCRIBE_IN_MIDDLE,
6 | UNSUBSCRIBE_IN_MIDDLE,
7 | THROW_ERROR,
8 | UNKNOWN_ACTION
9 | } from './actionTypes'
10 |
11 | export function addTodo(text) {
12 | return { type: ADD_TODO, text }
13 | }
14 |
15 | export function addTodoAsync(text) {
16 | return dispatch => new Promise(resolve => setImmediate(() => {
17 | dispatch(addTodo(text))
18 | resolve()
19 | }))
20 | }
21 |
22 | export function addTodoIfEmpty(text) {
23 | return (dispatch, getState) => {
24 | if (!getState().length) {
25 | dispatch(addTodo(text))
26 | }
27 | }
28 | }
29 |
30 | export function dispatchInMiddle(boundDispatchFn) {
31 | return {
32 | type: DISPATCH_IN_MIDDLE,
33 | boundDispatchFn
34 | }
35 | }
36 |
37 | export function getStateInMiddle(boundGetStateFn) {
38 | return {
39 | type: GET_STATE_IN_MIDDLE,
40 | boundGetStateFn
41 | }
42 | }
43 |
44 | export function subscribeInMiddle(boundSubscribeFn) {
45 | return {
46 | type: SUBSCRIBE_IN_MIDDLE,
47 | boundSubscribeFn
48 | }
49 | }
50 |
51 | export function unsubscribeInMiddle(boundUnsubscribeFn) {
52 | return {
53 | type: UNSUBSCRIBE_IN_MIDDLE,
54 | boundUnsubscribeFn
55 | }
56 | }
57 |
58 | export function throwError() {
59 | return {
60 | type: THROW_ERROR
61 | }
62 | }
63 |
64 | export function unknownAction() {
65 | return {
66 | type: UNKNOWN_ACTION
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/test/helpers/actionTypes.js:
--------------------------------------------------------------------------------
1 | export const ADD_TODO = 'ADD_TODO'
2 | export const DISPATCH_IN_MIDDLE = 'DISPATCH_IN_MIDDLE'
3 | export const GET_STATE_IN_MIDDLE = 'GET_STATE_IN_MIDDLE'
4 | export const SUBSCRIBE_IN_MIDDLE = 'SUBSCRIBE_IN_MIDDLE'
5 | export const UNSUBSCRIBE_IN_MIDDLE = 'UNSUBSCRIBE_IN_MIDDLE'
6 | export const THROW_ERROR = 'THROW_ERROR'
7 | export const UNKNOWN_ACTION = 'UNKNOWN_ACTION'
8 |
--------------------------------------------------------------------------------
/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 {
2 | ADD_TODO,
3 | DISPATCH_IN_MIDDLE,
4 | GET_STATE_IN_MIDDLE,
5 | SUBSCRIBE_IN_MIDDLE,
6 | UNSUBSCRIBE_IN_MIDDLE,
7 | THROW_ERROR
8 | } from './actionTypes'
9 |
10 |
11 | function id(state = []) {
12 | return state.reduce((result, item) => (
13 | item.id > result ? item.id : result
14 | ), 0) + 1
15 | }
16 |
17 | export function todos(state = [], action) {
18 | switch (action.type) {
19 | case ADD_TODO:
20 | return [
21 | ...state,
22 | {
23 | id: id(state),
24 | text: action.text
25 | }
26 | ]
27 | default:
28 | return state
29 | }
30 | }
31 |
32 | export function todosReverse(state = [], action) {
33 | switch (action.type) {
34 | case ADD_TODO:
35 | return [
36 | {
37 | id: id(state),
38 | text: action.text
39 | }, ...state
40 | ]
41 | default:
42 | return state
43 | }
44 | }
45 |
46 | export function dispatchInTheMiddleOfReducer(state = [], action) {
47 | switch (action.type) {
48 | case DISPATCH_IN_MIDDLE:
49 | action.boundDispatchFn()
50 | return state
51 | default:
52 | return state
53 | }
54 | }
55 |
56 | export function getStateInTheMiddleOfReducer(state = [], action) {
57 | switch (action.type) {
58 | case GET_STATE_IN_MIDDLE:
59 | action.boundGetStateFn()
60 | return state
61 | default:
62 | return state
63 | }
64 | }
65 |
66 | export function subscribeInTheMiddleOfReducer(state = [], action) {
67 | switch (action.type) {
68 | case SUBSCRIBE_IN_MIDDLE:
69 | action.boundSubscribeFn()
70 | return state
71 | default:
72 | return state
73 | }
74 | }
75 |
76 | export function unsubscribeInTheMiddleOfReducer(state = [], action) {
77 | switch (action.type) {
78 | case UNSUBSCRIBE_IN_MIDDLE:
79 | action.boundUnsubscribeFn()
80 | return state
81 | default:
82 | return state
83 | }
84 | }
85 |
86 | export function errorThrowingReducer(state = [], action) {
87 | switch (action.type) {
88 | case THROW_ERROR:
89 | throw new Error()
90 | default:
91 | return state
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/test/typescript.spec.js:
--------------------------------------------------------------------------------
1 | import * as tt from 'typescript-definition-tester'
2 |
3 |
4 | describe('TypeScript definitions', function () {
5 | this.timeout(0)
6 |
7 | it('should compile against index.d.ts', (done) => {
8 | tt.compileDirectory(
9 | __dirname + '/typescript',
10 | fileName => fileName.match(/\.ts$/),
11 | () => done()
12 | )
13 | })
14 | })
15 |
--------------------------------------------------------------------------------
/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