좀더 쉽게 그리고 코드를 최소로 쓰려고 노력했다
그리고 엄청 쉬운해결법을 두고 3일동안이나 못찾아서 스트레를 받았었지만 풀고나서 속시원한 작업이었다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux';
import store from './store';





ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

---

app.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Detail from './routes/Detail';
import Home from './routes/Home';
const App = () => {
  return (
    <Router>
    <Routes>
      <Route path="/" element={<Home/>}/>
      <Route path="/:id" element={<Detail/>}/>
    </Routes>
  </Router>
  );
};

export default App;

---

store.js

import {createStore, combineReducers} from 'redux';

const ADD = "ADD"
export const DELETE = "DELETE"


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

export const deleteToDo = (만세)=>{
    
    return{
        type:DELETE,
        id: 만세
    
    }
 
}

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

const store = createStore(reducer)
export default (store);

routes 폴더

Home.js

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addToDo, deleteToDo } from '../store';
import ToDo from './ToDo';
const Home = () => {
    
    const toDos = useSelector((state)=>state);
    const dispatch = useDispatch()
    
    const [text,setText] = useState("")

    const onChange =(e) =>{
        setText(e.target.value)
    }

    const onSubmit = (e) =>{
        e.preventDefault();
        dispatch(addToDo(text))
        setText("")        
    }


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




export default Home;

---

ToDo.js

import React from 'react';
import { useDispatch } from 'react-redux';



const ToDo = ({text, id,deleteToDo}) => {
    const dispatch = useDispatch()

    const onClick = () =>{
        dispatch(deleteToDo(id))

    }

    return (
        <li>
        {text}
      
         <button onClick={onClick} >DEL</button>
        </li>
    );
};

export default ToDo;

---

Detail.js

import React from 'react';

const Detail = () => {
    return (
        <div>
            <h1>디테일 페이지</h1>
        </div>
    );
};

export default Detail;

---

문제점 설명

store 의

딜리트 기능의 action.id 를 읽어오질 못해서 큰일이었다. id값을 못구해오던것이다.

이게 사실 엄청 쉬운 방법이있었다 내가 못해서 못찾은 이유도 컸다

Home.js 에서

<ul>
  {toDos.map(toDo=>(<ToDo {...toDo} key={toDo.id} id={toDo.id} deleteToDo={deleteToDo}/>) )}
</ul>

이부분에서 id={toDo.id} 과 deleteToDo={deleteToDo}를 프롭스로 넘겨서

프롭스 파일의 거리가 멀다면 그파일에서

mport { useSelector, useDispatch } from 'react-redux';

사용하면된다.

toDo.js

import React from 'react';
import { useDispatch } from 'react-redux';


								// id 는 toDo.id 값이다.
const ToDo = ({text, id, deleteToDo}) => {
    const dispatch = useDispatch()

    const onClick = () =>{
        dispatch(deleteToDo(id)) 
										//이쪽으로 넘겨주면 엄청 쉬운방법이었다.
								
    }

    return (
        <li>
        {text}
      
         <button onClick={onClick} >DEL</button>
        </li>
    );
};

export default ToDo;

받아주고

store.js

export const deleteToDo = (만세)=>{
    
    return{
        type:DELETE,
        id: 만세
    
    }

여기서 받아서 필터로 보내면 되는것이었다 ㅠㅠ.

파일 흐름
store.js = 액션 기능과 액을 부르는 함수

app.js = 라우터 적용

index.js = 스토어 연결. (리덕스)

Home.js = useSelector / useDispatch 와 스토어의 함수를 불러오기.

ToDo.js = 리스트 생성 작업 (액션실행함수와 id 값을 Home.js 에서 받아와야합니다.)
ToDo.js. = onClick 에 적용.