naive react redux todo app

Author: rwieruch

package.json

@@ -7,7 +7,8 @@
   },
   "dependencies": {
     "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "react-dom": "^15.5.4",
+    "redux": "^3.6.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/index.js

@@ -1,8 +1,137 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+import { combineReducers, createStore } from 'redux';
 import './index.css';
 
-ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
+// action types
+
+const TODO_ADD = 'TODO_ADD';
+const TODO_TOGGLE = 'TODO_TOGGLE';
+const FILTER_SET = 'FILTER_SET';
+
+// reducers
+
+const todos = [
+  { id: '0', name: 'learn redux' },
+  { id: '1', name: 'learn mobx' },
+];
+
+function todoReducer(state = todos, action) {
+  switch(action.type) {
+    case TODO_ADD : {
+      return applyAddTodo(state, action);
+    }
+    case TODO_TOGGLE : {
+      return applyToggleTodo(state, action);
+    }
+    default : return state;
+  }
+}
+
+function applyAddTodo(state, action) {
+  const todo = Object.assign({}, action.todo, { completed: false });
+  return state.concat(todo);
+}
+
+function applyToggleTodo(state, action) {
+  return state.map(todo =>
+    todo.id === action.todo.id
+      ? Object.assign({}, todo, { completed: !todo.completed })
+      : todo
+  );
+}
+
+function filterReducer(state = 'SHOW_ALL', action) {
+  switch(action.type) {
+    case FILTER_SET : {
+      return applySetFilter(state, action);
+    }
+    default : return state;
+  }
+}
+
+function applySetFilter(state, action) {
+  return action.filter;
+}
+
+// action creators
+
+function doAddTodo(id, name) {
+  return {
+    type: TODO_ADD,
+    todo: { id, name },
+  };
+}
+
+function doToggleTodo(id) {
+  return {
+    type: TODO_TOGGLE,
+    todo: { id },
+  };
+}
+
+function doSetFilter(filter) {
+  return {
+    type: FILTER_SET,
+    filter,
+  };
+}
+
+// store
+
+const rootReducer = combineReducers({
+  todoState: todoReducer,
+  filterState: filterReducer,
+});
+
+const store = createStore(rootReducer);
+
+// components
+
+function TodoApp({ todos, onToggleTodo }) {
+  console.log(todos);
+  return <TodoList
+    todos={todos}
+    onToggleTodo={onToggleTodo}
+  />;
+}
+
+function TodoList({ todos, onToggleTodo }) {
+  return (
+    <div>
+      {todos.map(todo => <TodoItem
+        key={todo.id}
+        todo={todo}
+        onToggleTodo={onToggleTodo}
+      />)}
+    </div>
+  );
+}
+
+function TodoItem({ todo, onToggleTodo }) {
+  const { name, id, completed } = todo;
+  return (
+    <div>
+      {name}
+      <button
+        type="button"
+        onClick={() => onToggleTodo(id)}
+      >
+        {completed ? "Incomplete" : "Complete"}
+    </button>
+    </div>
+  );
+}
+
+function render() {
+  ReactDOM.render(
+    <TodoApp
+      todos={store.getState().todoState}
+      onToggleTodo={id => store.dispatch(doToggleTodo(id))}
+    />,
+    document.getElementById('root')
+  );
+}
+
+store.subscribe(render);
+render();