https://github.com/oplog/resource-redux
Generic http resource store for redux
https://github.com/oplog/resource-redux
react react-redux redux redux-saga typescript
Last synced: 12 months ago
JSON representation
Generic http resource store for redux
- Host: GitHub
- URL: https://github.com/oplog/resource-redux
- Owner: oplog
- License: mit
- Created: 2018-12-10T16:17:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T00:27:24.000Z (over 3 years ago)
- Last Synced: 2024-04-28T20:44:55.162Z (about 2 years ago)
- Topics: react, react-redux, redux, redux-saga, typescript
- Language: TypeScript
- Homepage: https://oplog.github.io/resource-redux
- Size: 2.1 MB
- Stars: 10
- Watchers: 7
- Forks: 2
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Resource Redux
Resource redux is a redux library for easily managing http resources lifecyle. It works with `redux-saga`, `react-redux` and `redux`. It has builtin reusable store actions (generators), reducer and selectors.
## Installation
- Installing from npm registry
```sh
npm i --save resource-redux
```
- You can also manually clone & build if you have lerna use cases
```sh
git clone git@github.com:oplog/resource-redux.git
```
## The Design
In resource-redux, each http resource is defined as the following model;
```ts
export interface Resource {
data?: T; // The data that is returned from the http call
error?: Error; // The error (non HTTP 200) body that is returned from the http call
isBusy: boolean; // Represents the request continuity
isSuccess: boolean; // Represents the request is successfully returned
}
```
These http resource states are kept in redux state tree as the following model;
```ts
{
"createUser": Resource,
"updateUser": Resource
}
```
The state is mutated by the resourceType (i.e "createUser"), builtin actions & reducer.
## Getting Started
In your store type definition add resource store state;
```ts
import { ResourceStoreState } from "resource-redux";
export interface StoreState {
// other type definitions of store
resources: ResourceStoreState;
}
```
#### Add resource types for a model definition;
```ts
export enum ResourceType {
CreateUser = "createUser" // Here, string enums are required
UpdateUser = "updateUser"
}
```
#### Add initial states of your resources;
```ts
import { initialResourceState } from "resource-redux";
// This is the initial state of your redux state configuration
export const initialState = {
resources: {
[ResourceType.CreateUser]: { ...initialResourceState },
[ResourceType.UpdateUser]: { ...initialResourceState }
}
}
```
#### Create a http api map and configure your redux saga middleware
Http api map is a dictionary which has the resource type as keys and http call functions as the value;
```ts
export type RequestParams = Dictionary;
function createUser(params: RequestParams) {
const accessToken = getAccessToken();
// Here the following function performs an http call and returns the Promise object
// The following function is auto generated by swagger
return api.Users.apiCreateUser(
params.createUser, // These are the post body parameters that is passed by resource redux saga
addAuthToHeader(accessToken)
).then(r => r);
}
const resourceApiMap = {
[ResourceType.CreateUser]: createUser,
}
// middleware configuration
export const resources = resourceStore({
httpRequestMap: resourceApiMap,
});
sagaMiddleware.run(resources.resourceSaga); // This is required for saga to catch your requested actions
```
#### Mapping props to store & Dispatching actions in containers;
```ts
import { resourceActions, resourceSelectors } from "resource-redux";
function mapStateToProps({resources}: StoreState) {
return {
user: resourceSelectors.getData(resources, ResourceType.User)
};
}
function mapDispatchToProps(dispatch: Dispatch) {
return {
onUserSubmit: (userFormModel) => {
dispatch(
resourceActions.resourceRequested(ResourceType.CreateUser, {
userFormModel // These parameters are mapped into post body parameters defined in http request api map's createUser() function
})
);
}
}
}
```