Velopert Todos 커스텀

다음 블로그에서 Todos 부분만 덕패턴으로 편집한 코드입니다.

class 버전과 hooks 버전이 혼합된 부분에서 카운트는 제거하고 투두 부분만

단순 함수형 + 원페이지로 바꿨습니다.

 

https://velopert.com/3533

리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (ii) | VELOPERT.LOG

 

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { todosReducer } from "./VelopTodos";
import App from './VelopTodos';
const rootReducer = combineReducers({
        todosReducer
})
ReactDOM.render(
    <Provider store={createStore(rootReducer)}><App /></Provider>,
    document.getElementById('root'),
);
 
 

 

VelopTodos.js

 

import {useSelector} from 'react-redux'
import React, { useMemo } from "react";
import { bindActionCreators } from "redux";
import { useDispatch } from "react-redux";
import {createAction, handleActions} from 'redux-actions'
import produce from 'immer'
 
const CHANGE_INPUT = 'todos/CHANGE_INPUT'
const INSERT = 'todos/INSERT'
const TOGGLE = 'todos/TOGGLE'
const REMOVE = 'todos/REMOVE'
 
const changeInput = createAction(CHANGE_INPUT, input => input)
let id = 3
const insert = createAction(INSERT, text => ({id: id++, text, done: false}))
const toggle = createAction(TOGGLE, id => id)
const remove = createAction(REMOVE, id => id)
 
const initailState = {
    input: '',
    todos: [
        {
            id: 1,
            text: '리액트 학습',
            done: true
        },
        {
            id: 2,
            text: '리덕스 학습',
            done: false
        }
    ]
}
 
export const todosReducer = handleActions({
    [CHANGE_INPUT]: (state, {payload: input})=> produce(state, draft =>{draft.input = input}) ,
    [INSERT]: (state, {payload: todo})=> produce(state, draft => {draft.todos.push(todo)}),
    [TOGGLE]: (state, {payload: id})=>
        produce(state, draft => {const todo = draft.todos.find(todo => todo.id === id)
            todo.done = !todo.done}),
    [REMOVE]: (state, { payload: id })=>
        produce(state, draft => {const index = draft.todos.findIndex(todo => todo.id === id)
            draft.todos.splice(index, 1)})
 
}, initailState)
 
 
 
const useActions = (actions, deps) => {
    const dispatch = useDispatch()
    return useMemo(
        ()=>{
            if(Array.isArray(actions)){
                return actions.map(a => bindActionCreators(a, dispatch))
            }
            return bindActionCreators(actions, dispatch)
        }, deps ? [dispatch, ...deps] : deps
    )
}
 
const TodoItem = ({todo, onToggle, onRemove}) =>{
    return <>
        <div>
            <input
                type="checkbox"
                onClick={() => onToggle(todo.id)}
                checked={todo.done}
                readOnly={true}
            />
            <span style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
                {todo.text}
              </span>
            <button onClick={() => onRemove(todo.id)}>삭제</button>
        </div>
    </>
}
 
 
const Todos= ({input, todos, onChangeInput, onInsert,  onToggle, onRemove}) => {
    const onSubmit = e => {
        e.preventDefault()
        onInsert(input)
        onChangeInput('')
    }
    const onChange = e => {
        e.preventDefault()
        onChangeInput(e.target.value)
    }
    return <>
        <div>
            <form onSubmit={onSubmit} >
                <div>
                    <div >
                        <input
                            value={input}
                            onChange={onChange}
                        />
                    </div>
                    <button type="submit">
                        등록
                    </button>
                </div>
            </form>
            <div>
                {
                    todos.map(todo=>(<TodoItem
                        todo={todo}
                        key={todo.id}
                        onToggle={onToggle}
                        onRemove={onRemove}/>))
                }
            </div>
        </div>
    </>
}
 
const TodosApp = () => {
    const {input, todos} =
        useSelector(({todosReducer})=>({input: todosReducer.input, todos: todosReducer.todos}))
    const [onChangeInput, onInsert, onToggle, onRemove] = useActions(
        [changeInput, insert, toggle, remove],
        [])
    return (
        <Todos input={input} todos={todos} onChangeInput={onChangeInput}
                    onInsert={onInsert} onToggle={onToggle} onRemove={onRemove}/>)
}
export default React.memo(TodosApp)