react-redux-quest v0.1.3
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.