Implemented a basic to-do list app.

to-do-list/src/features/toDo/toDo.js

-// import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 // import PropTypes from 'prop-types';
 
-// import classNames from 'classnames';
-// import styles from './toDo.module.css';
+import classNames from 'classnames';
+import styles from './toDo.module.css';
 
 import {
+  selectDraft,
+  selectItems,
+  setDraft,
+  addItem,
+  setDone,
 } from './toDoSlice.js';
 
 function Item(props) {
-  return null;
+  const dispatch = useDispatch();
+
+  const classes = classNames({
+    [styles.done]: props.done,
+  });
+
+  const onClick = () => dispatch(setDone({
+    index: props.index,
+    done: !props.done,
+  }));
+
+  return (
+    <div className={styles.item}>
+      <span className={classes}>#{props.index} {props.text}</span>
+      <button onClick={onClick}>Done</button>
+    </div>
+  );
 }
 
-Item.propTypes = {
-};
+// Item.propTypes = {
+// };
 
 export function List() {
-  return null;
+  const draft = useSelector(selectDraft);
+  const items = useSelector(selectItems);
+  const dispatch = useDispatch();
+
+  const onChange = (event) => dispatch(setDraft({
+    draft: event.target.value,
+  }));
+  const onClick = () => dispatch(addItem());
+
+  return (
+    <>
+      {items.map((item, index) =>
+        <Item key={index} index={index} text={item.text} done={item.done} />,
+      )}
+      <div className={styles.draft}>
+        <input type={'text'} className={styles.wide} value={draft} onChange={onChange} />
+        <button onClick={onClick}>+</button>
+      </div>
+    </>
+  );
 }

to-do-list/src/features/toDo/toDoSlice.js

@@ -3,11 +3,44 @@ import { createSlice } from '@reduxjs/toolkit';
 const toDoSlice = createSlice({
   name: 'toDo',
   initialState: {
+    draft: '',
+    items: [],
   },
   reducers: {
+    setDraft: (toDo, action) => {
+      const {
+        draft,
+      } = action.payload;
+      toDo.draft = draft;
+    },
+    addItem: (toDo) => {
+      toDo.items.push({
+        text: toDo.draft,
+        done: false,
+      });
+      toDo.draft = '';
+    },
+    setDone: (toDo, action) => {
+      const {
+        index,
+        done,
+      } = action.payload;
+      toDo.items[index].done = done;
+    },
   },
 });
 export default toDoSlice;
 
-// export const {
-// } = toDoSlice.actions;
+export const {
+  setDraft,
+  addItem,
+  setDone,
+} = toDoSlice.actions;
+
+export function selectDraft(state) {
+  return state.toDo.draft;
+}
+
+export function selectItems(state) {
+  return state.toDo.items;
+}