shanebdavis

//**********************************************
// src/components/ToDo.js
//**********************************************
import React, { useState } from "react";
import ReduxLogo from "../assets/redux.png";
import { ToDoItem } from "./ToDoItem";
import "./ToDo.css";
import { addItem, useList } from "../reduxState/list";

export const ToDo = () => {

shanebdavis

import { useRedux } from "hooks-for-redux";

const getUniqueId = list =>
  list.length > 0 ? Math.max(...list.map(t => t.id)) + 1 : 1;

export const [useList, { addItem, deleteItem }] = useRedux(
  "list",
  [
    { id: 1, text: "clean the house" },
    { id: 2, text: "buy milk" }

shanebdavis

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Provider, useRedux } from "hooks-for-redux";

// redux/list.js
const getUniqueId = list =>
  list.length > 0 ? Math.max(...list.map(t => t.id)) + 1 : 1;

const [useList, { addItem, deleteItem }] = useRedux(
  "list",

shanebdavis

import React from "react";
import ReactDOM from "react-dom";
import { applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunkMiddleware from "redux-thunk";
import { Provider, useRedux, createStore, setStore } from "hooks-for-redux";

import "./styles.css";

// store.js

shanebdavis

import React from "react";
import ReactDOM from "react-dom";
import { Provider, useRedux } from "hooks-for-redux";

import "./styles.css";

// toggleState.js
const [useToggle, { toggleSwitch }] = useRedux("toggle", false, {
  toggleSwitch: state => !state
});

shanebdavis

const ToDoItem = ({ item }) =>
  <li>
    {item.text}
    <button onClick={ deleteItem }/>
  </li>

const ToDo = () =>
  <div>
    <ul>
      {useList().map(item => (

shanebdavis

let list = [
  { id: 1, text: "clean the house" },
  { id: 2, text: "buy milk" }
];

// REDUCERS
const _addItem    = (list, item) => [...list, { ...item, id: uniqueId() }]
const _deleteItem = (list, item) => list.filter(todo => todo.id !== item.id)

// STUBS: 

shanebdavis

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import appActions from "./redux/actions/appActions";
import ToDo from "./components/ToDo";
import "./App.css";

const App = () => {
  const list = useSelector((store) => store.appReducer.list);
  const dispatch = useDispatch();

shanebdavis

import React from "react";
import { ToDo } from "./components/ToDo";
import "./App.css";

export const App = () => <ToDo />;

shanebdavis

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "hooks-for-redux";
import { App } from "./App";

ReactDOM.render(
  <Provider>
    <App />
  </Provider>,
  document.getElementById("root")