one state container

Author: rwieruch

src/App.js

@@ -8,7 +8,7 @@ import uuid from 'uuid/v4';
 
 const DispatchContext = createContext(null);
 
-const initalTodos = [
+const initialTodos = [
   {
     id: uuid(),
     task: 'Learn React',
@@ -70,22 +70,31 @@ const todoReducer = (state, action) => {
 
 const App = () => {
   const [filter, dispatchFilter] = useReducer(filterReducer, 'ALL');
-  const [todos, dispatchTodos] = useReducer(todoReducer, initalTodos);
+  const [todos, dispatchTodos] = useReducer(
+    todoReducer,
+    initialTodos
+  );
 
   // Global Dispatch Function
   const dispatch = action =>
     [dispatchTodos, dispatchFilter].forEach(fn => fn(action));
 
-  const filteredTodos = todos.filter(todo => {
-    if (filter === 'ALL') {
+  // Global State
+  const state = {
+    filter,
+    todos,
+  };
+
+  const filteredTodos = state.todos.filter(todo => {
+    if (state.filter === 'ALL') {
       return true;
     }
 
-    if (filter === 'COMPLETE' && todo.complete) {
+    if (state.filter === 'COMPLETE' && todo.complete) {
       return true;
     }
 
-    if (filter === 'INCOMPLETE' && !todo.complete) {
+    if (state.filter === 'INCOMPLETE' && !todo.complete) {
       return true;
     }