React binding API Design

[acrazing]

Query

Old style

function BlogList({ authorId }) {
  const [blogList] = useSelector(selectBlogList(authorId))

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getBlogList(authorId))
  }, [authorId]);

  return blogList.map((blogId) => <BlogRow blogId={blogId} key={blogId} />
}

New style

function BlogList({ authorId }) {
  const [blogList, status /* loading, is initializing, etc */] = useQuery(queryBlogList(authorId))

  return blogList.map((blogId) => <BlogRow blogId={blogId} key={blogId} />
}

Mutation

Old style

function BlogRow({ blogId }) {
  const [blog] = useSelector(selectBlog(blogId))
  const dispatch = useDispatch();
  const handleDelete = async () => {
    await dispatch(deleteBlog(blogId))
    toast('Deleted')
  }

  return (
    <a href={`/blog/${blogId}`}>
      {blog.title} <button onClick={handleDelete}>Delete</button>
    </a>
  )
}

New style

function BlogRow({ blogId }) {
  const [blog] = useSelector(selectBlog(blogId))
  const handleDelete = useAction(deleteBlog(blogId), () => toast('Deleted'))

  return (
    <a href={`/blog/${blogId}`}>
      {blog.title} <button onClick={handleDelete}>Delete</button>
    </a>
  )
}

[acrazing]

Query

// based on action & selector
const queryBlogList = query(getBlogList, blogListBox.getList);