<step67>'react_useReducer'

1) 

Counter2.js

// import React, { useState } from 'react';
import React, { useReducer } from 'react';
function reducer(state, action){
    switch(action.type){
        case "INCREASE":
            return state+1;
        case "DECREASE":
            return state-1;
        default:
            return state;
    }
}
const Counter2 = () => {
    // const [ number, setNumber ] = useState(0);
    
    // function Increase(){
    //     setNumber(number+1);
    // }
    // function Decrease(){
    //     setNumber(number-1);
    // }

    const [ number, dispatch ] = useReducer(reducer,0);

    function Increase(){
        dispatch({type:"INCREASE"});
    }
    function Decrease(){
        dispatch({type:"DECREASE"});
    }

    return (
        <div>
            <h2>{number}</h2>
            <button onClick={Decrease}>-1</button>
            <button onClick={Increase}>+1</button>
        </div>
    );
};

export default Counter2;

2) 

App.js

import './App.css';
import UserList from './components/UserList';
import { useState, useRef, useReducer } from 'react';
import CreateUser from './components/CreateUser';

const initialState = {
  inputs: {
    username: '',
    email: '',
  },
  users: [
    {
      id: 1,
      username: 'green',
      email: 'green@gmail.com',
      active: false,
    },
    {
      id: 2,
      username: 'blue',
      email: 'blue@gmail.com',
      active: false,
    },
    {
      id: 3,
      username: 'yellow',
      email: 'yellow@gmail.com',
      active: false,
    }
  ]
}
function reducer(state, action){
  switch(action.type){
    case "CHANGE_INPUT":
      return {
          ...state,
          inputs: {
              ...state.inputs,
              [action.name]: action.value,
          }
      };
    case "CREATE_USER":
      return {
          inputs: initialState.inputs,
          users: state.users.concat(action.user),
      };
    case "DELETE_USER":
      return {
          ...state,
          users: state.users.filter(user=> user.id !== action.id),
      };
    case "ACTIVE_USER":
      return {
          ...state,
          users: state.users.map(user=> 
            user.id === action.id ? {...user, active: !user.active } : user),
      };
    default:
      return state;
  }
}
function App() {
  //useReducer로 상태관리
  const [ state, dispatch ] = useReducer(reducer,initialState);
  const { users } = state;
  const { username, email } = state.inputs;
  const onChange = (e) => {
    const { name, value } = e.target;
    dispatch({
        type: "CHANGE_INPUT",
        name: name,
        value: value,
    })
  }
  const onCreate = () => {
    dispatch({
        type: "CREATE_USER",
        user: {
            id: nextId.current,
            username: username,
            email: email,
        }
    })
    nextId.current += 1;
  }
  const nextId = useRef(4);
  const onDelete = (id) => {
      dispatch({
          type: "DELETE_USER",
          id: id,
      })
  }
  const onToggle = (id) => {
      dispatch({
          type: "ACTIVE_USER",
          id: id,
      })
  }
  
  return (
    <div className="App">
        <CreateUser email={email} username={username} onChange={onChange} 
        onCreate={onCreate}></CreateUser>
        <UserList users={users} onDelete={onDelete} onToggle={onToggle} />
    </div>
  );
}

export default App;

3) 

App.js

import './App.css';
import { useState, useRef, useReducer } from 'react';
import TodoLists from './components/TodoLists';
import CreateTodo from './components/CreateTodo';

const initialState = {
    list: "",
    todos: [
        {
            id:1,
            list: "리액트 공부하기",
            isDone: false,
        },
        {
            id:2,
            list: "타입스크립트 공부하기",
            isDone: false,
        },
        {
            id:3,
            list: "리덕스 공부하기",
            isDone: false,
        }
    ]
}
function reducer(state, action){
    switch(action.type){
        case "CHANGE_INPUT":
            return {
                ...state,
                list: action.list,
            };
        case "CREATE_TODO":
            return {
                list: "",
                todos: state.todos.concat(action.todo)
            };
        case "DELETE_TODO":
            return {
                ...state,
                todos: state.todos.filter(todo=> todo.id !== action.id)
            };
        case "ISDONE_TODO":
            return {
                ...state,
                todos: state.todos.map(todo=>
                    todo.id === action.id ? {...todo, isDone: !todo.isDone} : todo)
            };
        default:
            return state;
    }
}
function App() {
    const [ state, dispatch ] = useReducer(reducer, initialState);
    const { list, todos } = state;
    
  
  const onChange = (e) => {
    dispatch({
        type: "CHANGE_INPUT",
        list: e.target.value,
    })
    console.log(list);
  }
  const nexId = useRef(4);
  const onCreate = () => {
    dispatch({
        type: "CREATE_TODO",
        todo: {
            id: nexId.current,
            list: list,
            isDone: false,
        }
    })
  }
  const onDelete = (id) => {
    dispatch({
        type: "DELETE_TODO",
        id: id,
    })
  }
  const onToggle = (id) => {
    dispatch({
        type: "ISDONE_TODO",
        id: id,
    })
  }


  return (
    <div className="App">
      <CreateTodo list={list} onChange={onChange} onCreate={onCreate}/>
      <TodoLists todos={todos} onDelete={onDelete} onToggle={onToggle}/>
    </div>
  );
}

export default App;

CreateTodo.js

import React from 'react';

const CreateTodo = ({onChange, list, onCreate}) => {
    return (
        <div>
            <h2>to do list</h2>
            <div>
                <input type='text' value={list} name='newlist' onChange={onChange}/>
                <button onClick={onCreate}>+</button>
            </div>
        </div>
    );
};

export default CreateTodo;

TodoList.js

import React from 'react';
import './TodoList.css';

const TodoList = ({todo, onDelete, onToggle}) => {
    return (
        <div>
            <span className={todo.isDone ? 'isDone' : ""} onClick={()=>{ onToggle(todo.id) }}>
                {todo.list}
            </span>
            <button onClick={()=>{ onDelete(todo.id) }}>X</button>
        </div>
    );
};

export default TodoList;

 

TodoLists.js

import React from 'react';
import TodoList from './TodoList';

const TodoLists = ({todos, onDelete, onToggle}) => {
    return (
        <div>
            {todos.map(todo=><TodoList todo={todo} key={todo.id} onDelete={onDelete} onToggle={onToggle}/>)}
        </div>
    );
};

export default TodoLists;

TodoList.css

.isDone {
    background-color: #eee;
}