Simplifying the React Redux Example Todo List App with custom use-todos hooks

Example Redux Todo App: https://redux.js.org/basics/example

Made with create-react-library

Install

npm install --save @theuybv/use-todos

Redux Store Provider on App level

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

import {TodosProvider} from "@theuybv/use-todos";

const Index = () => {

  return (
    <TodosProvider>
      {" "}
      <App />
    </TodosProvider>
  );
};

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

Actions, Selectors and Constants

import React from 'react';
import useTodos from "@theuybv/use-todos";
const SomeComp = () => {
  const {actions, selectors, VISIBILITY_FILTERS} = useTodos();
  const {toggleTodo, addTodo, setVisibility} = actions; // similar to stateToProps
  const {todos, active} = selectors; // similar to dispatchToProps
  const {SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE} = VISIBILITY_FILTERS;


  return (
    <div>Do something with it!</div>
  )
}

License

MIT © theuybv