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

const { createStore, combineReducers } = require("redux");

let reducers = {};
export const store = createStore(s => s);

store.injectReducer = (key, reducer) => {
  reducers[key] = reducer;
  store.replaceReducer(combineReducers(reducers));
};

shanebdavis

// INJECT-REDUCERS INTO REDUX STORE
store.injectReducer(storeKey, (state = initialState, { type, payload }) =>
  reducers[type] ? reducers[type](state, payload) : state
);

shanebdavis

// EXPORTS
export const useList = () => {
  const [state, setState] = useState(getState());
  useLayoutEffect(() => subscribe(setState), [setState]);
  return state;
};

export const addItem = item =>
  store.dispatch({ type: "addItem", payload: item });
export const deleteItem = item =>

shanebdavis

// HELPERS
const getState = () => store.getState()[storeKey];

const subscribe = f => {
  let lastState = getState();
  return store.subscribe(
    () => lastState !== getState() && f((lastState = getState()))
  );
};

shanebdavis

import { useState, useLayoutEffect } from "react";
import { store } from "./store";
const storeKey = "list";

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

const initialState = [
  { id: 1, text: "clean the house" },

shanebdavis

import React from "react";
import { render } from "react-dom";
import { ToDo } from "./components/ToDo";

render(<ToDo />, document.getElementById("root"));

shanebdavis

export const useList = () => [
  { id: 1, text: "clean the house" },
  { id: 2, text: "buy milk" }
];

export const addItem = item => null
export const deleteITem = item => null

shanebdavis

import React, { useState } from "react";
import { ToDoItem } from "./ToDoItem";
import { addItem, useList } from "../redux/list";

export const ToDo = () => {
  const list = useList();
  const [text, setText] = useState("");

  const createNewToDoItem = () => {
    if (!text) return alert("Please enter text!");

shanebdavis

import React from "react";
import { deleteItem } from "../redux/list";

export const ToDoItem = ({ item }) => (
  <li>
    {item.text + " "}
    <button onClick={() => deleteItem(item)}>-</button>
  </li>
);