normalized state

Author: rwieruch

package.json

@@ -6,6 +6,7 @@
     "react-scripts": "1.0.7"
   },
   "dependencies": {
+    "normalizr": "^3.2.3",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-redux": "^5.0.5",

src/index.js

@@ -2,9 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { applyMiddleware, combineReducers, createStore } from 'redux';
 import { Provider, connect } from 'react-redux';
-import { createLogger } from 'redux-logger'
+import { createLogger } from 'redux-logger';
+import { schema, normalize } from 'normalizr';
 import './index.css';
 
+// schemas
+
+const todoSchema = new schema.Entity('todo');
+
 // action types
 
 const TODO_ADD = 'TODO_ADD';
@@ -18,7 +23,14 @@ const todos = [
   { id: '1', name: 'learn mobx' },
 ];
 
-function todoReducer(state = todos, action) {
+const normalizedTodos = normalize(todos, [todoSchema]);
+
+const initialTodoState = {
+  entities: normalizedTodos.entities.todo,
+  ids: normalizedTodos.result,
+};
+
+function todoReducer(state = initialTodoState, action) {
   switch(action.type) {
     case TODO_ADD : {
       return applyAddTodo(state, action);
@@ -32,15 +44,17 @@ function todoReducer(state = todos, action) {
 
 function applyAddTodo(state, action) {
   const todo = { ...action.todo, completed: false };
-  return [ ...state, todo ];
+  const entities = { ...state.entities, [todo.id]: todo };
+  const ids = [ ...state.ids, action.todo.id ];
+  return { ...state, entities, ids };
 }
 
 function applyToggleTodo(state, action) {
-  return state.map(todo =>
-    todo.id === action.todo.id
-      ? { ...todo, completed: !todo.completed }
-      : todo
-  );
+  const id = action.todo.id;
+  const todo = state.entities[id];
+  const toggledTodo = { ...todo, completed: !todo.completed };
+  const entities = { ...state.entities, [id]: toggledTodo };
+  return { ...state, entities };
 }
 
 function filterReducer(state = 'SHOW_ALL', action) {
@@ -100,12 +114,12 @@ function TodoApp() {
   return <ConnectedTodoList />;
 }
 
-function TodoList({ todos }) {
+function TodoList({ todosAsIds }) {
   return (
     <div>
-      {todos.map(todo => <ConnectedTodoItem
-        key={todo.id}
-        todo={todo}
+      {todosAsIds.map(todoId => <ConnectedTodoItem
+        key={todoId}
+        todoId={todoId}
       />)}
     </div>
   );
@@ -128,20 +142,26 @@ function TodoItem({ todo, onToggleTodo }) {
 
 // Connecting React and Redux
 
-function mapStateToProps(state) {
+function mapStateToPropsList(state) {
+  return {
+    todosAsIds: state.todoState.ids,
+  };
+}
+
+function mapStateToPropsItem(state, props) {
   return {
-    todos: state.todoState,
+     todo: state.todoState.entities[props.todoId],
   };
 }
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToPropsItem(dispatch) {
   return {
      onToggleTodo: id => dispatch(doToggleTodo(id)),
   };
 }
 
-const ConnectedTodoList = connect(mapStateToProps)(TodoList);
-const ConnectedTodoItem = connect(null, mapDispatchToProps)(TodoItem);
+const ConnectedTodoList = connect(mapStateToPropsList)(TodoList);
+const ConnectedTodoItem = connect(mapStateToPropsItem, mapDispatchToPropsItem)(TodoItem);
 
 ReactDOM.render(
   <Provider store={store}>