hooks-for-redux core todo-with-filters-and-competes code

h4r-todo-core.js

// filtersSlice.js
import { useRedux } from 'hooks-for-redux'

export const filters = {
  all: () => true,
  completed: t => t.completed,
  active: t => !t.completed
}

export const [useFilters, { setVisibilityFilter }] = useRedux(
  'visibilityFilters',
  filters.all,
  {
    setVisibilityFilter: (__, filter) => {
      console.log("setVis: " + filter)
      return filters[filter] || filters.all
    }
  }
)

// todosSlice.js
import { useRedux } from 'hooks-for-redux'

export const [useTodos, { addTodo, toggleTodo, resetTodos }, todos] =
  useRedux('todos', [], {
    resetTodos: () => { nextTodoId = 0; return [] },

    addTodo: (todos, text) =>
      [...todos, { text, completed: false, id: nextTodoId++ }],

    toggleTodo: (todos, id) =>
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
  })

// VisibleTodoList.js
import React from 'react'
import Todo from './Todo'
import { useFilters } from '../filters/filtersSlice'
import { useTodos } from './todosSlice'

const VisibleTodoList = () =>
  <ul>
    {useTodos()
      .filter(useFilters())
      .map(todo => (
        <Todo key={todo.id} {...todo} />
      ))}
  </ul>

export default VisibleTodoList