Skip to content

andytango/redux-postgrest

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
tmp
 
 
 
 
 
 
 
 
 
 
 
 

🐘 Redux-Postgrest

Version

A library to make developing with React and postgREST as effortless as possible, by taking care of all the plumbing 🔧.

See the demo app!

Why?

One of the great things about PostgREST is that it can remove any indirection between your React application and your database, treating your data model itself as a "single, declarative source of truth".

Redux-PostgREST fully embraces this philsosophy. Your tables, views and functions are mapped to redux action types using PostgREST's own documentation endpoint.

Now, when you want to query your database, all you have to do is just dispatch redux actions, and then select the response data! 👍

🧰 What's in the box

  • A middleware - takes care of data fetching
  • A reducer - stores API requests and responses

diagram

Optionally, to make life even easier:

  • Action creators
  • Selectors - in development
  • Hooks

🏁 Quickstart

Install

yarn add redux-postgrest

Configure

// store.js
import { applyMiddleware, combineReducers, createStore } from "redux";
import { connectPgRest } from "redux-postgrest";

const { reducer, middleware } = connectPgRest({
  url: "http://localhost:8000" // Your postgREST server
});

const store = createStore(
  combineReducers({ api: reducer }),
  applyMiddleware(middleware)
);

export default store;

Make a table

-- your postgres db:

CREATE TABLE my_table_name (
  example_id       INTEGER PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
  example_text     TEXT,
  example_datetime TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO my_table_name (example_text) VALUES ('Hello world!');

Dispatch

// Component.js

const {
  useDispatchGet,
  useDispatchPost,
  useDispatchPatch,
  useDispatchDelete
} = makePgRestHooks("my_table_name"); // Your postgREST endpoint

function MyComponent() {
  const dispatch = useDispatchGet();
  
  useEffect(() => {
    dispatch()
  }, [dispatch]); // will only run after the component is first mounted
  
  // ...
}

export default MyComponent;

Select

// Component.js
import React from 'react';

const {
  useDispatchGet,
  useDispatchPost,
  useDispatchPatch,
  useDispatchDelete
} = makePgRestHooks("my_table_name"); // Your postgREST endpoint

function MyComponent() {
  const dispatch = useDispatchGet();
  
  useEffect(() => {
    dispatch();
  }, [dispatch]);
  
  const myTableData = useSelector(
    ({ api }) => api.my_table_name && api.my_table_name.GET.body
  );
  
  if(myTableData && myTableData.length) {
    return <span>{myTableData[0].example_text}</span> // Should say "Hello world!"
  }
  
  return null;
}

export default MyComponent;

License

MIT.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published