this.handleSave(todo.id, text)}
+ />
)
} else {
element = (
-
- {todo.text} {other && other.completed ? "Yes!" : " . "}
+ {todo.text} {isRelatedTodoCompleted ? "(+)" : "(-)"}
- deleteTodo(todo.id)} />
+ deleteTodo(todo.id)} />
)
}
return (
{element}
@@ -69,30 +71,30 @@ class TodoItem extends Component {
)
}
}
-
TodoItem.propTypes = {
todo: PropTypes.object.isRequired,
+ isCompleted: PropTypes.bool,
+ isRelatedTodoCompleted: PropTypes.bool,
editTodo: PropTypes.func.isRequired,
deleteTodo: PropTypes.func.isRequired,
completeTodo: PropTypes.func.isRequired
}
-const relatedTodoSelectorFactory = () => createSelector(
- [
- state => state.todos,
- (_, ownProps) => ownProps.todo.other
- ],
- (todos, otherId) => ({ other: otherId === null ? null : todos[otherId] })
-)
-
-const makeMapStateToProps = () => relatedTodoSelectorFactory();
+const makeMapStateToProps = (initialState, initialProps) => {
+ const { id } = initialProps
+ const mapStateToProps = (state) => {
+ const { todos } = state
+ const todo = todos.byId[id]
+ return {
+ todo,
+ isCompleted: todos.isCompletedById[id],
+ isRelatedTodoCompleted: todos.isCompletedById[todo.relatedId]
+ }
+ }
+ return mapStateToProps
+}
-const ConnectedTodoItem = connect(
- makeMapStateToProps
+export default connect(
+ makeMapStateToProps,
+ { completeTodo, editTodo, deleteTodo }
)(TodoItem)
-
-// MWE: export TodoItem for the plain scenario,
-// export ConnectedTodoItem for the scenario with 1 selector
-// export default TodoItem
-
-export default ConnectedTodoItem
diff --git a/components/TodoTextInput.js b/components/TodoTextInput.js
index bfdbf7d..fb3eabb 100644
--- a/components/TodoTextInput.js
+++ b/components/TodoTextInput.js
@@ -1,7 +1,7 @@
import React, { Component, PropTypes } from 'react'
import classnames from 'classnames'
-class TodoTextInput extends Component {
+export default class TodoTextInput extends Component {
constructor(props, context) {
super(props, context)
this.state = {
@@ -46,7 +46,6 @@ class TodoTextInput extends Component {
)
}
}
-
TodoTextInput.propTypes = {
onSave: PropTypes.func.isRequired,
text: PropTypes.string,
@@ -54,5 +53,3 @@ TodoTextInput.propTypes = {
editing: PropTypes.bool,
newTodo: PropTypes.bool
}
-
-export default TodoTextInput
diff --git a/components/ToggleAll.js b/components/ToggleAll.js
new file mode 100644
index 0000000..af88b5e
--- /dev/null
+++ b/components/ToggleAll.js
@@ -0,0 +1,27 @@
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { getListedCount, getCompletedCount } from '../reducers'
+import { completeAll } from '../actions'
+
+const ToggleAll = ({ completedCount, listedCount, completeAll }) => (
+ listedCount ? (
+
-
-
- )
- }
-}
-
-App.propTypes = {
- todos: PropTypes.array.isRequired,
- actions: PropTypes.object.isRequired
-}
-
-function mapStateToProps(state) {
- return {
- todos: state.todos
- }
-}
-
-function mapDispatchToProps(dispatch) {
- return {
- actions: bindActionCreators(TodoActions, dispatch)
- }
-}
-
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(App)
diff --git a/dist/index.html b/dist/index.html
new file mode 100644
index 0000000..010c1ed
--- /dev/null
+++ b/dist/index.html
@@ -0,0 +1,12 @@
+
+
+
+ Redux TodoMVC example
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
index a5d61b7..c03cc74 100644
--- a/index.js
+++ b/index.js
@@ -2,7 +2,7 @@ import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
-import App from './containers/App'
+import App from './components/App'
import configureStore from './store/configureStore'
import 'todomvc-app-css/index.css'
import * as Perf from 'react-addons-perf';
diff --git a/package.json b/package.json
index 8f44890..1e6f1d1 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"description": "Redux TodoMVC example",
"scripts": {
"start": "node server.js",
+ "build": "NODE_ENV=production webpack --config webpack.config.production.js",
"test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register --require ./test/setup.js",
"test:watch": "npm test -- --watch"
},
@@ -22,13 +23,14 @@
"pure-render-mixin": "^1.0.2",
"react": "^0.14.7",
"react-dom": "^0.14.7",
- "react-redux": "^4.4.1",
+ "react-redux": "^4.4.4",
"redux": "^3.3.1",
"reselect": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.3.15",
"babel-loader": "^6.2.0",
+ "babel-plugin-transform-object-rest-spread": "^6.6.5",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.1",
diff --git a/reducers/filter.js b/reducers/filter.js
new file mode 100644
index 0000000..d8e0717
--- /dev/null
+++ b/reducers/filter.js
@@ -0,0 +1,11 @@
+import { SHOW_ALL } from '../constants/TodoFilters'
+import { SET_FILTER } from '../constants/ActionTypes'
+
+export default function filter(state = SHOW_ALL, action) {
+ switch (action.type) {
+ case SET_FILTER:
+ return action.filter
+ default:
+ return state
+ }
+}
diff --git a/reducers/index.js b/reducers/index.js
index a94ace3..cdb3b2d 100644
--- a/reducers/index.js
+++ b/reducers/index.js
@@ -1,8 +1,42 @@
import { combineReducers } from 'redux'
+import { createSelector } from 'reselect'
+import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters'
import todos from './todos'
+import filter from './filter'
-const rootReducer = combineReducers({
- todos
+export default combineReducers({
+ todos,
+ filter
})
-export default rootReducer
+export const getVisibleTodoIds = createSelector(
+ [
+ state => state.todos.listedIds,
+ state => state.todos.isCompletedById,
+ state => state.filter,
+ ],
+ (listedIds, isCompletedById, filter) => {
+ switch (filter) {
+ case SHOW_ALL:
+ return listedIds
+ case SHOW_COMPLETED:
+ return listedIds.filter(id => isCompletedById[id])
+ case SHOW_ACTIVE:
+ return listedIds.filter(id => !isCompletedById[id])
+ }
+ }
+)
+
+export const getListedCount = createSelector(
+ state => state.todos.listedIds,
+ ids => ids.length
+)
+
+export const getCompletedCount = createSelector(
+ [
+ state => state.todos.listedIds,
+ state => state.todos.isCompletedById
+ ],
+ (listedIds, isCompletedById) =>
+ listedIds.filter(id => isCompletedById[id]).length
+)
diff --git a/reducers/todos.js b/reducers/todos.js
index 475fd1a..6f95f94 100644
--- a/reducers/todos.js
+++ b/reducers/todos.js
@@ -1,66 +1,86 @@
import { ADD_TODO, DELETE_TODO, EDIT_TODO, COMPLETE_TODO, COMPLETE_ALL, CLEAR_COMPLETED } from '../constants/ActionTypes'
+import { combineReducers } from 'redux'
-// MWE: For testing:
-const STORE_SIZE = 10000;
-
-const initialState = [
-]
+let initialById = {}
+let initialListedIds = []
-for (var i = 0; i < STORE_SIZE; i++) {
- initialState.push({
+const STORE_SIZE = 10000;
+for (let i = 0; i < STORE_SIZE; i++) {
+ let nextId = 'prefilled-' + i
+ initialListedIds.push(nextId)
+ initialById[nextId] = {
text: 'Item' + i,
- completed: false,
- id: i,
- // array index as reference to some other object in the state tree.
- // in the real world todos would probably be a map and 'initialState[i - 1].id' would be used..
- // but let's not make this test unecessary inefficient by filtering for the correct todo
- other: i > 0
- ? i - 1
- : null
- });
+ id: nextId,
+ relatedId: i > 0 ? 'prefilled-' + (i - 1) : null
+ };
}
-export default function todos(state = initialState, action) {
+function todo(state, action) {
switch (action.type) {
case ADD_TODO:
- return [
- {
- id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1,
- completed: false,
- text: action.text
- },
- ...state
- ]
-
- case DELETE_TODO:
- return state.filter(todo =>
- todo.id !== action.id
- )
-
+ return {
+ text: action.text,
+ id: action.id,
+ relatedId: null
+ }
case EDIT_TODO:
- return state.map(todo =>
- todo.id === action.id ?
- Object.assign({}, todo, { text: action.text }) :
- todo
- )
-
- case COMPLETE_TODO:
- return state.map(todo =>
- todo.id === action.id ?
- Object.assign({}, todo, { completed: !todo.completed }) :
- todo
- )
+ return {
+ ...state,
+ text: action.text
+ }
+ }
+}
- case COMPLETE_ALL:
- const areAllMarked = state.every(todo => todo.completed)
- return state.map(todo => Object.assign({}, todo, {
- completed: !areAllMarked
- }))
+function byId(state = initialById, action) {
+ switch (action.type) {
+ case ADD_TODO:
+ case EDIT_TODO:
+ return {
+ ...state,
+ [action.id]: todo(state[action.id], action)
+ }
+ default:
+ return state
+ }
+}
+function listedIds(state = initialListedIds, action, {isCompletedById}) {
+ switch (action.type) {
+ case ADD_TODO:
+ return [action.id, ...state]
+ case DELETE_TODO:
+ return state.filter(todoId => todoId !== action.id)
case CLEAR_COMPLETED:
- return state.filter(todo => todo.completed === false)
-
+ return state.filter(id => !isCompletedById[id])
default:
return state
}
}
+
+function isCompletedById(state = {}, action, {listedIds}) {
+ switch (action.type) {
+ case COMPLETE_TODO:
+ return {
+ ...state,
+ [action.id]: !state[action.id]
+ }
+ case COMPLETE_ALL:
+ const areAllCompleted = listedIds.every(id => state[id])
+ if (areAllCompleted) {
+ return {}
+ }
+ let nextState = {}
+ listedIds.forEach(id => nextState[id] = true)
+ return nextState
+ default:
+ return state
+ }
+}
+
+export default function todos(state = {}, action) {
+ return {
+ byId: byId(state.byId, action),
+ listedIds: listedIds(state.listedIds, action, state),
+ isCompletedById: isCompletedById(state.isCompletedById, action, state)
+ }
+}
diff --git a/webpack.config.production.js b/webpack.config.production.js
new file mode 100644
index 0000000..6f6fc99
--- /dev/null
+++ b/webpack.config.production.js
@@ -0,0 +1,33 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+ entry: './index',
+ output: {
+ path: path.join(__dirname, 'dist'),
+ filename: 'bundle.js',
+ publicPath: '/static/'
+ },
+ plugins: [
+ new webpack.optimize.OccurenceOrderPlugin(),
+ new webpack.DefinePlugin({
+ 'process.env.NODE_ENV': '"production"'
+ }),
+ new webpack.optimize.UglifyJsPlugin()
+ ],
+ module: {
+ loaders: [
+ {
+ test: /\.js$/,
+ loaders: [ 'babel' ],
+ exclude: /node_modules/,
+ include: __dirname
+ },
+ {
+ test: /\.css?$/,
+ loaders: [ 'style', 'raw' ],
+ include: __dirname
+ }
+ ]
+ }
+}