Skip to content
declarative side-effects inside react with hooks
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.npmignore
.travis.yml
LICENSE.md
README.md
index.test.tsx
index.ts
jest.config.js
package.json
prettier.config.js
tests.js
tsconfig.json
tslint.json
yarn.lock

README.md

use-cofx Build Status

Use cofx with react hooks

Awhile ago I created cofx which is a library with a similar API to redux-saga but without redux. Since then I have spawned a few libraries built on top of it and use-cofx is the latest iteration. What this library allows you to do is call a generator function within your react component and the results will get memoized. It has a loading state, value, and error. Since the API is extremely similar to redux-saga, it would be trivial to convert these generator functions into sagas at a later time if so desired.

For those who don't know, the biggest value added to using a declarative side-effects library like cofx is the ability to test async io in a synchronous manner. Because the generators you write simply yield JSON, it is very easy to test using a library like gen-tester

import useCofx from 'use-cofx';

function* fetchMovies() {
  const resp = yield call(fetch, '/movies');
  const json = yield call([resp, 'json']);
  return json;
}

const App = () => {
  const { loading, error, value } = useCofx(fetchMovies);

  if (loading) {
    return <div>Loading ...</div>
  }

  if (error) {
    return <div>Error: {error.message}</div>
  }

  return (
    <div>
      {value.map((movie) => {
        return <div>{movie.title}</div>
      })}
    </div>
  );
};

See cofx for more information on what cofx can do

You can’t perform that action at this time.