๐ index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import App from "./components/App";
import store from "./store";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
๐ 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;
๐ routes
๐ Home.js
import React from "react";
import { useState } from "react";
import { connect } from "react-redux";
import { actionCreators } from "../store";
import ToDo from "../components/ToDo";
function Home({ toDos, addToDo }) {
const [text, setText] = useState("");
function onChange(e) {
setText(e.target.value);
}
function onSubmit(e) {
e.preventDefault();
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} />
))}
</ul>
</>
);
}
function mapStateToProps(state) {
return { toDos: state };
}
function mapDispatchToProps(dispatch) {
return {
addToDo: (text) => dispatch(actionCreators.addToDo(text)),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Home);
๐ Detail.js
import React from "react";
import { useParams } from "react-router-dom";
import { connect } from "react-redux";
function Detail({ toDo }) {
return (
<>
<h1>{toDo?.text}</h1>
<h5>Created at : {toDo?.id}</h5>
</>
);
}
function mapStateToProps(state, ownProps) {
const {
match: {
params: { id },
},
} = ownProps;
return { toDo: state.find((toDo) => toDo.id === parseInt(id)) };
}
export default connect(mapStateToProps, null)(Detail);
๐ components
๐ App.js
import React from "react";
import { HashRouter as Router, Route } from "react-router-dom";
import Home from "../routes/Home";
import Detail from "../routes/Detail";
function App() {
return (
<Router>
<Route path="/" exact component={Home}></Route>
<Route path="/:id" exact component={Detail}></Route>
</Router>
);
}
export default App;
๐ ToDo.js
import React from "react";
import { connect } from "react-redux";
import { actionCreators } from "../store";
import { Link } from "react-router-dom";
function ToDo({ text, onBtnClick, id }) {
return (
<li>
<Link to={`/${id}`}>
{text} <button onClick={onBtnClick}>DEL</button>
</Link>
</li>
);
}
function mapDispatchToProps(dispatch, ownProps) {
return {
onBtnClick: () => dispatch(actionCreators.deleteToDo(ownProps.id)),
};
}
export default connect(null, mapDispatchToProps)(ToDo);