replacing-redux-with-react-hooks-and-context-part-1

https://medium.com/octopus-labs-london/replacing-redux-with-react-hooks-and-context-part-1-11b72ffdb533

Author: taejs

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
-/**/node_modules
+/**/node_modules
+/.idea

no-redux/src/store.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+export const Store =React.createContext();
+
+const initialState ={
+  episodes : [],
+  favorites : []
+}
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'FETCH_DATA':
+      return {...state, episodes : action.payload}
+    case 'ADD_FAVORITE':
+      return {...state, favorites : [...state.favorites, action.payload]}
+    case 'REMOVE_FAVORITE':
+      return {...state, favorites : action.payload}
+    default:
+      return state;
+  }
+}
+
+export function StoreProvider(props) {
+  const [state, dispatch] = React.useReducer(reducer, initialState);
+  const value = {state, dispatch}
+  return (<Store.Provider value={value}>{props.children}</Store.Provider>);
+}

typescript-todolist/src/components/TodoItem.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface Props {
+    text : string;
+    done : boolean;
+    onToggle() : void;
+    onRemove() : void;
+}
+
+const TodoItem : React.SFC<Props> = ({text, done, onToggle, onRemove}) => (
+    <li>
+        <b onClick={onToggle}
+           style={{
+               textDecoration : done ? 'line-through' : 'none'
+           }}>
+            {text}
+        </b>
+        <button style={{all : 'unset', marginLeft : '0.5rem'}} onClick={onRemove}>지우기</button>
+    </li>
+);
+
+export default TodoItem;

typescript-todolist/src/components/TodoList.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import TodoItem from './TodoItem'
+
+interface Props {
+
+}
+
+interface TodoItemState {
+    id : number;
+    text : string;
+    done : boolean;
+}
+
+interface State {
+    input : string;
+    todoItems : TodoItemState[];
+}
+
+class TodoList extends React.Component<Props, State> {
+    nextTodoId : number = 0;
+    state:State = {
+        input : '',
+        todoItems : []
+    };
+
+    onToggle = (id:number): void => {
+        const { todoItems } = this.state;
+        const nextTodoItems:TodoItemState[] = todoItems.map(item => {
+            if(item.id === id) {
+                item.done = !item.done;
+            }
+            return item;
+        })
+
+        this.setState({
+            todoItems : nextTodoItems
+        })
+    }
+
+    onSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
+        e.preventDefault();
+        const { todoItems, input } = this.state;
+        const newItem:TodoItemState = { id: this.nextTodoId++, text : input, done : false };
+        const nextTodoItems:TodoItemState[] = todoItems.concat(newItem);
+
+        this.setState({
+            input : '',
+            todoItems : nextTodoItems
+        });
+    }
+
+    onRemove = (id :number): void => {
+        const { todoItems } = this.state;
+        const nextTodoItems : TodoItemState[] = todoItems.filter(item => item.id !== id);
+        this.setState({
+            todoItems : nextTodoItems
+        })
+    }
+
+    onChange = (e : React.FormEvent<HTMLInputElement>): void => {
+        const {value} = e.currentTarget;
+        this.setState({
+            input : value
+        });
+    }
+
+    render() {
+        const { onSubmit, onChange, onToggle, onRemove } = this;
+        const { input, todoItems } = this.state;
+
+        const todoItemList : React.ReactElement[] = todoItems.map(
+            todo => (
+                <TodoItem text={todo.text} done={todo.done} onToggle={()=>onToggle(todo.id)} onRemove={()=>onRemove(todo.id)}/>
+            )
+        )
+
+        return (
+            <div>
+                <h1>오늘 뭐하지?</h1>
+                <form onSubmit={onSubmit}>
+                    <input onChange={onChange} value={input} />
+                    <button type="submit">추가하기</button>
+                </form>
+                <ul>
+                    {todoItemList}
+                </ul>
+            </div>
+        )
+    }
+}
+
+export default TodoList

typescript-todolist/src/store/modules/todos.ts

@@ -0,0 +1,5 @@
+export interface TodoItemDataParams {
+    id : number;
+    text : string;
+    done : boolean;
+}