Skip to content
This repository has been archived by the owner on Jul 30, 2020. It is now read-only.

Latest commit

 

History

History
384 lines (323 loc) · 12.1 KB

README.md

File metadata and controls

384 lines (323 loc) · 12.1 KB
Raw

net-provider

This package is no longer supported. i recommend on https://github.com/tannerlinsley/react-query as alternative

This package depend on redux-saga and can be run inside react and react-native projects

with net-provider you can read and update your DB is with less of code and less effort by using the set of ready actions or with the data component provider

Demo: Edit redux-admin and net-provider

3 ways to work with net-provider

Query component

import  React, { Component } from  'react'
import {dispatchAction, Query} from  'net-provider';
const URL = '/me'
export  default  class  HomeScreen  extends Component {
	render() {
		return (
			<Query
				query={{
					targetKey: URL,
					url: URL,
					onEnd: ({data}) =>  alert('END')
				}}
			>
			{({ data,
				error,
				loading,
				crudActions,
				count}) => {
					return  <Text>
						{data && JSON.stringify(data)}
						{error && JSON.stringify(error)}
						{loading && 'Loading'}
						{count && count}
					</Text>
			}}
		</Query>
	)}}

Selector

import  React, { Component } from  'react'
import { connect } from  'react-redux';
import {dispatchAction, selectors} from  'net-provider';
 
const  URL = '/me'
class  HomeScreen extends  Component {
	componentDidMount() {
		dispatchAction.Read({
			targetKey: URL,
			url: URL
		})
	}

	componentWillUnmount() {
		dispatchAction.Clean({targetKey: URL})
	}

	render() {
		const {data, error, loading, count} = this.props;
		return (
			<Text>
				Example:
				{data && JSON.stringify(data)}
				{error && JSON.stringify(error)}
				{loading && 'Loading'}
				{count && count}
			</Text>
		)
	}
}

const  mapStateToProps = state  => {
	const {data, error, loading, count} = selectors.getCrudObject(state, URL)
	return {
		data, error, loading, count
	}
};
export default connect(mapStateToProps, null)(HomeScreenN)

Set state

import  React, { Component } from  'react'
import {dispatchAction, selectors} from  'net-provider';
  
const  URL = '/me'

class  HomeScreen  extends  Component {
	constructor(props){
		super(props);
		this.state= {
			loading: false, data: null, error: null
		};
	};

	componentDidMount() {
		this.setState({loading: true})
		dispatchAction.Read({
			targetKey: URL,
			url: URL,
			// data: values,
			onEnd: ({data}) => {
			this.setState({loading: false,data, error: null})
			},
			onFailed: ({error}) => {
			const  errorMessage = (error && error.response && error.response.data && error.response.data.message)|| 'oops something went wrong. please try again later'
			this.setState({loading: false, error: errorMessage})}
		})
	}

	componentWillUnmount() {
		dispatchAction.Clean({targetKey: URL})
	}

	render() {
	const {data, error, loading, count} = this.state;
		return (
			<Text>
			Example:
			{data && JSON.stringify(data)}
			{error && JSON.stringify(error)}
			{loading && 'Loading'}
			{count && count}
			</Text>
		)
	}
}

export  default  HomeScreen

Installation

  1. You can install net-provider with NPM, Yarn 
    npm install net-provider --save
  2. Configuration 
    import {setApiInstance, setDispatch, setDefaultIdKey, setErrorHandler} from  'net-provider'
import  axios  from  'axios';

// Set an axios instance
setApiInstance(
    axios.create({baseURL: 'www.myDomain.com'})
)
// Set Dispatch - Optional, if you want to use actions with any place without worry about redux-connect
setDispatch(store.dispatch)
// Set the unique id Key In Your database
setDefaultIdKey('_id')
// Set error handler - Optional,  function that will call whenever an error will catch
setErrorHandler(
   function(err) {
   	if(err  &&  err.response
   	&& (err.response.statusText  ===  'Unauthorized'
   	||  err.response.status  ===  401)) {
   		store.dispatch(logout())}
   	}}
)
  3. Add to your reducers 
    import { combineReducers } from  'redux';
import { crudReduxReducer } from  'net-provider'
export default combineReducers({
  ...
 crud: crudReduxReducer 
});
    * the key must be crud
  4. Add your saga watchers 
    import { all, call } from  'redux-saga/effects';
import { crudReduxSaga } from  'net-provider';
function*  rootSaga() {
yield  all([
	....
	call(crudReduxSaga, 'crudReduxSaga'),
]);
}
export  default  rootSaga;

Actions

How to ?

You can dispatch an action from any part of your app like this:

import {dispatchAction} from  'net-provider'

dispatchAction.Read({url: 'users', targetKey: 'usersScreen'})

And you can use it with out the dispatchAction provider, like this: if you want to put an action inside saga, use this option.

import {actions} from  'net-provider'
dispatch(
	actions.Read({url: 'users', targetKey: 'usersScreen'})
)

Actions list

Server actions

  • Create - add record to DB table
  • Read - Fetch data from server
  • Refresh - Fetch data from server with the last parameters
  • Update- update DB record
  • Delete- Delete DB record

All the server actions accept an object with this parameters

  • targetKey {string} required the key to set the parameters in store

  • url {string} API endpoint - required only for the first action to this targetKey

  • method {string} one of ['get' , 'post' , 'put' , 'delete'] method will set by default base the action type but you can override this defaults: Read() = 'get' | Create() = 'post' | Update() = 'put' | Delete() = 'delete'

  • params {object} request params

  • data {object} request params

  • dispatchId {string} optional -pass dispatch Id that can help you track your specific request

  • customHandleResponse {func} help us find the data from response when the structure is not response.data, this function will get the response from server and need to return the data

  • getCountRequestConfig {func}- use it when you want to fetch the count from diffrent url, function that get ({actionPayload, response, fetchObject}) => ({url, method, params, data}) - actionPayload - the current action.payload that trigger this - response - the response from this current request - fetchObject - fetchObject from reduxStore.crud[targetKey] contain data, lastRead...
    * If you want to skip the request and persist the current count (maybe filters didnt change and only pagination) then return false
    when you using this the getCountFromResponse is required and will run on this request response example:

     <NetProvider loadData={{
 	url: 'products',
 	targetKey: 'productsScreen'
 	params: {filter: {active: 1}},
 	getCountRequestConfig: ({actionPayload, response, fetchObject}) => {
 		const currentCount = fetchObject.count
 		const  lastFilters  =  getDeepObjectValue(fetchObject, 'lastRead.params.filter')
 		const  newFilter  =  getDeepObjectValue(actionPayload, 'params.filter')
 		if((currentCount  ||  currentCount  ===  0) &&  isEqual(lastFilters, newFilter)) {
 			return  false  // persist count
 		}
 		const  config  = { url: actionPayload.url  +  '/count', method: actionPayload.method}
 		const  filter  =  getDeepObjectValue(response, 'config.params.filter')
 		if(filter) { config.params  = {filter} }
 		return  config
 	},
 	getCountFromResponse: (response) => {
 		return getDeepObjectValue(response,'data.count') ||  0
 	}
 }} />

  • getCountFromResponse {func} help us find the count of your data from the response if it is possible

  • customAxiosInstance {object} when the default axios is not relevant pass a different instance

  • customFetch {func} - when you want to take the control of the fetch to your hand, can be useful for custom requests or for request that need to be handle by SDK or somthing else your function will be call by saga like this

     response = yield call(customFetch, { url, method, data, params, payload:  action.payload})

  • onStart {func} - call back that be call before the request

  • onEnd {func} - call back that be call when request end

  • onFailed {func} - call back that be call when request failed

  • refreshType {string} - one of ['local', 'server', 'none'] - server is the default This parameter is relevant when we change a record inside a list, we let you decide how to keep your list update after any change(create,delete,update)

    • local - when you dispatch request to server we will update the data Immediately, before we send the request to server, and if the request failed we will restore the change this option save data transfer and good for user experience
    • server - in each success change on one of the records we will refresh all the list data. this option is the default, it will ensure that your data sync with the server, this default because sometimes one change can influencing other parameters
    • none - the list will not be affected

  • useResponseValues - {boolean}- sometimes when we put data to server it will return us an object or a list of objects with the updating values, set true if this is the situation to set the result from server on store

Local Actions

  • CreateLocal({targetKey, data}) - add record to data inside the redux store
  • UpdateLocal({targetKey, data})- update record inside the redux store
  • DeleteLocal({targetKey})- delete record from the redux store
  • Clean({targetKey})- clean this targetKey from redux-store

Selectors

All the data will be store inside redux > crud > {.....} Example:

store : {
	crud: {
		"Admin-orders-list" : {
			targetKey: "Admin-orders-list"
			url: "orders"
			status: "read-success"
			error: null
			loading: false
			count: 150
			data: [...]
		},
		"Admin-posts-list" : {
			targetKey: "Admin-posts-list"
			url: "posts"
			status: "read-start"
			error: null
			loading: true
			count: 0
			data: null
		}
	}
}

You can connect any component and find the data with our selectors, like that:

import { connect } from  'react-redux';
import {selectors} from  'net-provider';

const postListTargetKey = 'Admin-posts-list' // This the target key from your action
const mapStateToProps = state => ({
  adminPostList: selectors.getCrudObject(state, postListTargetKey ),
});

export default connect(mapStateToProps , null)(MyComponent);

Selectors list:

  • getCrudState(state) - will be return all the crud reducer
  • getCrudObject(state, TARGET_KEY) - - will be one object that include (data, status, error...)
  • getError(state, TARGET_KEY)
  • getCount(state, TARGET_KEY)
  • getData(state, TARGET_KEY)
  • getStatus(state, TARGET_KEY)

NetProvider component

<NetProvider /> will handle all for you, when your screen mount the component will fetch data from the server and provide to your function component a query status, data, actions and more...when the screen un mount netProvider will clean the store

props:

  • loadData - object or array - This data is the payload for the action, this can be an object, for component that depend on one resource or array for component that depends on more than one resource.
    *see action payload for more details
  • clearOnUnMount - boolean - default - True
  • set false when you want to persist your data even when componentWillUnmount

NetProvider render methods and props

There are three ways to render things with <NetProvider />

  • component => <NetProvider component={<YourComponent />}>
  • render props =><NetProvider render={(res) => <div></div>}>
  • children =><NetProvider>{(res) => <div></div>} </NetProvider>

All three render methods will be passed the same props:

  • crudActions: object

A collection of actions:

You can work directly with the dispactActions collection from this package, but when you work with crudActions from the NetProvider you didn't need to pass a targetKey in each request, all the rest is the same like the dispactActions collection

{Read, Refresh, Create, Update, Delete, SetParameters, Clean, CreateLocal, DeleteLocal, UpdateLocal}

  • status: string
  • error: object
  • loading:boolean
  • url: string
  • count: number
  • targetKey: string
  • data: the response from server *When the loadData is array then the props will be groups by targetKey