[리액트][리덕스] #3.0 React Redux (To Do List 세팅하기) - 초보자를 위한 리덕스 101

결과 화면

---

버전

react: ^18.2.0

react-dom: ^18.2.0

react-redux: ^8.0.5

react-router-dom: ^6.10.0

react-scripts: 5.0.1

redux: ^4.2.1

 

위의 버전에 맞춰서 강의와 다른 코드가 있습니다.

 

파일 구조

• src/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <App/>
)

 

• src/App.js

import React from 'react'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import Home from './routes/Home'
import Detail from './routes/Detail'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home/>}></Route>
        <Route path="/:id" element={<Detail/>}></Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App

 

• src/store/store.js

import { createStore } from 'redux'

const ADD = 'ADD'
const DELETE = 'DELETE'

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

export const deleteToDo = id => {
  return {
    type: DELETE,
    id
  }
}

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

const store = createStore(reducer)

export default store

 

• src/routes/Home.js

import React, { useState } from 'react'

function Home() {
  const [text, setText] = useState('')

  function onChange(e) {
    setText(e.target.value)
  }

  function onSubmit(e) {
    e.preventDefault()
    setText('')
    console.log(text)
  }

  return (
    <>
      <h1>To Do</h1>

      <form onSubmit={onSubmit}>
        <input type="text" value={text} onChange={onChange}/>
        <button>Add</button>
      </form>

      <ul></ul>
    </>
  )
}

export default Home

 

• src/routes/Detai.js

export default () => 'Detail'