[Redux] React-Redux 이용한 To-Do List 만들기

0. 구현 사항

-React와 React-Redux를 이용한 To-Do List 만들 것이다.

 

 

 

1. 전체 코드

 

(1). Home.js

import React, { useState } from 'react'
import { connect } from 'react-redux';
import ToDo from '../components/ToDo';
import { actionCreators } from '../store';

function Home({ toDos, addToDo }) {

    const [text, setText] = useState("");
    const onChange = (event) => {
        setText(event.target.value);
    }

    const onSubmit = (event) => {
        event.preventDefault();
        addToDo(text);
        setText("");

    }
    return (
        <>
            <h1>To Do</h1>
            <form onSubmit={onSubmit}>
                <input type="text" value={text} onChange={onChange}></input>
                <button>Add</button>
            </form>
            <ul>{toDos.map(toDo => (<ToDo {...toDo} key={toDo.id} />))} </ul>
        </>
    )
}

function mapStateToProps(state) {
    return { toDos: state };
}

function mapDispatchToProps(dispatch) {
    return {
        addToDo: (text) => dispatch(actionCreators.addToDo(text))
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

 

(2). store.js

import {createStore} from 'redux';

const ADD="ADD";
const DELETE="DELETE";

 const addToDo=text=>{
    return{
        type :ADD,
        text
    };
};

 const deleteToDo=id=>{
    return{
        type :DELETE,
        id:parseInt(id)
    };
};


const reducer=(state=[], action)=>{
    switch(action.type){
        case ADD:
            return[{text : action.text, id:Date.now()}, ...state];
        case DELETE:
            return state.filter(toDo=>toDo.id !== action.id);
        default:
            return state;
    }
};

const store=createStore(reducer);

export const actionCreators={
    addToDo,
    deleteToDo
}
export default store;

 

(3). ToDo.js

import React from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { actionCreators } from '../store'

 function ToDo({text, onBtnClick, id}) {
    return (
        <li>
            <Link to={`/${id}`}>
            {text}<button onClick={onBtnClick}>DEL</button>
            </Link>
        </li>
    )
}

function mapDispatchToProps(dispatch, ownProps) {
    return{
        onBtnClick:()=>{
            console.log(ownProps);
            dispatch(actionCreators.deleteToDo(ownProps.id))
        }
    }
}

export default connect(null, mapDispatchToProps) (ToDo);

 

 

 

2. store, reducer

 

import {createStore} from 'redux';

const ADD="ADD";
const DELETE="DELETE";

 const addToDo=text=>{
    return{
        type :ADD,
        text
    };
};

 const deleteToDo=id=>{
    return{
        type :DELETE,
        id:parseInt(id)
    };
};


const reducer=(state=[], action)=>{
    switch(action.type){
        case ADD:
            return[{text : action.text, id:Date.now()}, ...state];
        case DELETE:
            return state.filter(toDo=>toDo.id !== action.id);
        default:
            return state;
    }
};

const store=createStore(reducer);

export const actionCreators={
    addToDo,
    deleteToDo
}
export default store;

기존의 pure redux처럼 reducer, cerateStore는 동일핟하다. 그렇지만 subscribe, dispatch 에서 차이가 있다.

 

 

 

 

3.  connect, mapStateToProps, mapDispatchToProps -(create구현)

 

(1). mapStateToProps

 

function mapStateToProps(state) {
    return { toDos: state };
}

-mpaStateToProps 함수를 설정해준다.

 

export default connect(mapStateToProps, mapDispatchToProps)(Home);

-connect를 연결해준다. 그러면

-mapStateToProps를 통해서 store의 state를 home에서 인자로 받아서 사용 할 수있다.

 

(2). mapDispatchToProps

function mapDispatchToProps(dispatch) {
    return {
        addToDo: (text) => dispatch(actionCreators.addToDo(text))
    };
}

 

-mapDispatchToProps함수를 설정해준다.

export default connect(mapStateToProps, mapDispatchToProps)(Home);

-connect를 설정해주면 home에서 dispatch인자를 사용 할 수있다.

 

 

 

 

 

4.  Delete 구현

 function ToDo({text, onBtnClick, id}) {
    return (
        <li>
            <Link to={`/${id}`}>
            {text}<button onClick={onBtnClick}>DEL</button>
            </Link>
        </li>
    )
}

function mapDispatchToProps(dispatch, ownProps) {
    return{
        onBtnClick:()=>{
            console.log(ownProps);
            dispatch(actionCreators.deleteToDo(ownProps.id))
        }
    }
}

export default connect(null, mapDispatchToProps) (ToDo)

-mapDispatchToProps함수 설정후 connect를 통해서 dispatch를 ToDo에서 사용할 수 있다.