react-redux-quest

API and generic utilities for react and redux eco-system

Demo

Open in Codesandbox

Installation

Install via yarn

yarn add react-redux-quest

or npm

npm install react-redux-quest

methods

Components

import { Read } from 'react-redux-quest'
...
<Read
  url="https://api.github.com/search/users?q=p10ns11y"
  render={(response, error) => <div>{response}</div>}
/>
 

TODOs:

• Create
• Read
• Update
• Delete

Middleware

Just add to your middleware list

import { createStore, applyMiddleware } from "redux";
 
import loggerMiddleware from "redux-logger";
import thunkMiddleware from "redux-thunk";
 
import { questMiddleware } from "react-redux-quest";
 
import rootReducer from "./rootReducer";
 
const middlewares = [
  thunkMiddleware,
  questMiddleware,
  loggerMiddleware
];
 
export default preloadedState =>
  createStore(rootReducer, preloadedState, applyMiddleware(...middlewares));
 

The action descriptor as dispatchable action. Internally it will be transferred as fetch call and the actions specified in types or in typePrefix are dispatched.

import { API } from 'react-redux-quest'
...
const request = username => ({
  [API]: {
    url: `https://api.github.com/search/users?q=${username}`,
    method: "GET",
    meta: { slicedStateKey: "greet" },
    types: ["GREET_REQUEST", "GREET_SUCCESS", "GREET_FAIL"]
  }
});

or

const request2 = username => ({
  [API]: {
    url: `https://api.github.com/search/users?q=${username}`,
    method: "GET",
    meta: { slicedStateKey: "greet2" },
    typePrefix: "GREET" // => 'GREET_REQUEST', 'GREET_SUCCESS', 'GREET_FAIL'
  }
});

Then calls like this this.props.dispatch(request(this.state.username)) Will taken care by the middleware.

Reducers

questReducer

The reducer suitable for network status (isFetching)

import { combineReducers } from "redux";
import { questReducer } from "react-redux-quest";
 
export default combineReducers({
  ...otherReducers,
  // {http-verb.slicedStateKey: true|false}
  // eg., {get.greet: true } => API request is fired (GREET_REQUEST)🔥
  // via middleware and and the response is targeted to the stateSlice `greet`
  isFetching: questReducer
});
 

createRegExReducer

import { createRegExReducer } from "react-redux-quest";
...
const initialState = {}
function handlerFn() {...}
// Any action that ends with REQUEST/SUCCESS/FAIL go throw `handlerFn` reducer. You can also have different
// handlerFns
const regexReducer = createRegExReducer(initialState)({
    REQUEST: (state, action) => handlerFn(state, action),
    SUCCESS: (state, action) => handlerFn(state, action),
    FAIL: (state, action) => handlerFn(state, action)
  });

Other utilities

apiRequest is optimized fetch where error has responseJSON which is sent via body

import { apiRequest } from "react-redux-quest";
...
apiRequest(url, { method: 'GET'})
  .then(
      response => this.updateSuccess(response),
      error => this.updateError(error.responseJSON)
  );

Builds

If you don't use a package manager, you can access react-redux-quest via unpkg (CDN), download the source, or point your package manager to the url.

react-redux-quest is compiled as a collection of CommonJS modules & [ES2015 modules](http://www.2ality.com/2014/0 -9/es6-modules-final.html) for bundlers that support the jsnext:main or module field in package.json (Rollup, Webpack 4)

The react-redux-quest package includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. You can drop a UMD build as a <script> tag on your page. The UMD builds make react-redux-quest available as a window.ReactReduxQuest global variable.

License

The code is available under the MIT license.

Contributing

We are open to contributions, see CONTRIBUTING.md for more info.