react-parse

React Parse

React Parse is a set of actions and saga watchers that make your life easy to Get, POST, PUT, DELETE data on the server, you can fetch the data with our selectors from your redux store.

React Parse include 3 data provider components, to make the life even easier and let you get a collection from the server in less than 1 minute with the ability to filter result, create a new document and more…

Helpful only for react and react-native apps with parse server and redux as management

Demo

Edit zxn5nrjlz3

Table of content

Installation

How to install

Install with NPM:

npm i react-parse --save

1 - Inside your root component:

Set react-parse inside your root component:

import { config as reactParseConfig, setReactParseDispatch } from 'react-parse'

const apiConfig = { baseURL: envConfig.SERVER_URL, appId: envConfig.PARSE_ID }

reactParseConfig.init(apiConfig);
setReactParseDispatch(store.dispatch);

After the user logs in - set the user’s token:

reactParseConfig.setSessionToken('userSessionToken')

After the user logs out - clear the token:

reactParseConfig.removeSessionToken()

2 - With Redux - add parseReducer to your your rootReducer

import { parseReducer } from 'react-parse';
const rootReducers = combineReducers({
  ....,
  parse: parseReducer,
});

3 - With Redux-Saga, add parseWatcher to your root saga

import { parseWatcher } from 'react-parse'
function* rootSaga() {
  yield all([
	...,
    call(parseWatcher, 'parseWatcher'),
	]);
}

Now let see how you can fetch your products without writing any new action, reducer, saga worker..

Examples

FetchCollectionExample

Fetch collection data with data provider component

import {FetchCollection} from  'react-parse'
const TARGET_NAME = 'activeProducts'

class ReactParseExample extends React.Component { 
	render() {
		return (
			<FetchCollection 
				schemaName={'Product'}
				targetName={TARGET_NAME}
				query=
				userName='Dan'
				render={(props) => <MyTable {...props}/>}
			/>
		)
	}
}
/*
MyTable will get props from FetchCollection, MyTable props will be:
const {schemaName, targetName, userName, fetchProps} = this.props
const {data,error,status,info,isLoading,refresh,deleteDoc,put,post} = fetchProps
*/

We can do the same thing with react-parse actions

CollectionActionsExample

Get Products from server by using collections actions and selectors

import { selectors, actions} from 'react-parse';

const TARGET_NAME = 'ProductList'
class ReactParseExample extends React.Component {
	  componentWillMount() {
		  actions.collectionActions.fetchData({ targetName: TARGET_NAME , schemaName:  'Product' });
	  }
    render() {
		const { products, isLoading} = this.props;
	    return (<div....);
}	}

const mapStateToProps = (state) => {
  return {
    products: selectors.selectCollectionData(state, TARGET_NAME ),
    isLoading: selectors.selectCollectionLoading(state, TARGET_NAME ),
  };
}

Actions

How to use

import actions from react-parse

import {  collectionActions, cloudCodeActions, documentActions } from 'react-parse';

inside your component you can call an action like that:

documentActions.fetchData({....})

all the action are wrapped with dispatch then you didn’t need to bind a dispatch to call an action.

If you want to use:

You need to use action without our dispatch wrapper. for this, you need the call action with prefix pure_

For example-

// my-saga-file.js
import { put, select } from  'redux-saga/effects';
import { documentActions } from 'react-parse';

export  default  function*  fetchMember() {
	yield  put(documentActions.pure_fetchData({...}));
}

payload

action payload options

key type info
schemaName string db schemaName
targetName string target to save the response from server
query object http://docs.parseplatform.org/rest/guide/#queries
limit number number of documents to include in each query
skip number number of documents to skip
include string pointer to include, example: ‘Product,User’
keys string keys to include, , example: ‘firstName,LastName’
enableCount boolean set true to count objects in the collection
autoRefresh boolean set to to refresh collection data on one of the document change from one of the document actions from the collectionActions
documentId string db document id
data object  
functionName string cloud code function name
params object cloud code params
digToData string string that help us find your data, default is ‘data.result’
logger object pass to your Logger relevant info
filesIncluded boolean set true if your data include files to upload
fileValueHandler function pass function that will get the new file URL if you didn’t want to save it as File object
dispatchId string optional, you can pass some unique key to help you follow specific query status
boomerang any You can transfer anything and it will come back to you with data providers callbacks. this is just data that can help you manage your stuff
onSuccess function onSuccess will be called on query end successfully with this parameter ({type, action, status, res})
*res is the network response
onError function onError will be called on query end successfully with this parameter ({type, action, status, res})
*res is the network response

import all actions

import { actions } from  'react-parse';
// use like that: actions.collectionActions.fetchData(...)

collectionActions:

import { collectionActions } from  'react-parse';
// use like that: collectionActions.fetchData(...)

DocumentActions:

import { documentActions } from  'react-parse';

CloudCodeActions:

import { cloudCodeActions } from  'react-parse';

import {selectors} from 'react-parse'

CollectionSelectors

  1. selectors.selectCollections(state) // return you all the collection from state.parse.collections
  2. selectors.selectCollectionData(state, ‘TARGET_NAME’) // return you the data by targetName
  3. selectors.selectCollectionLoading(state, ‘TARGET_NAME’) // return true if query is loading
  4. selectors.selectCollectionInfo(state, ‘TARGET_NAME’) // return query info by targetName
  5. selectors.selectCollectionStatus(state, ‘TARGET_NAME’) // return query status by targetName
  6. selectors.selectCollectionError(state, ‘TARGET_NAME’) // return query error by targetName
  7. selectors.selectCollectionCount(state, ‘TARGET_NAME’) // return the quantity of results by targetName
  8. selectors.selectCollectionDispatchId(state, ‘TARGET_NAME’) // return the dispatchId of the current/last query
  9. selectors.selectCollectionBoomerang(state, ‘TARGET_NAME’) // return your last Boomerang data

    DocumentSelectors

  10. selectors.selectDocuments(state)
  11. selectors.selectDocumentData(state, ‘TARGET_NAME’)
  12. selectors.selectDocumentLoading(state, ‘TARGET_NAME’)
  13. selectors.selectDocumentInfo(state, ‘TARGET_NAME’)
  14. selectors.selectDocumentStatus(state, ‘TARGET_NAME’)
  15. selectors.selectDocumentError(state, ‘TARGET_NAME’)
  16. selectors.selectDocumentDispatchId(state, ‘TARGET_NAME’)
  17. selectors.selectDocumentBoomerang(state, ‘TARGET_NAME’)

    CloudCodeSelectors

  18. selectors.selectCloudCodes(state)
  19. selectors.selectCloudCodeData(state, ‘TARGET_NAME’)
  20. selectors.selectCloudCodeLoading(state, ‘TARGET_NAME’)
  21. selectors.selectCloudCodeInfo(state, ‘TARGET_NAME’)
  22. selectors.selectCloudCodeStatus(state, ‘TARGET_NAME’)
  23. selectors.selectCloudCodeError(state, ‘TARGET_NAME’)
  24. selectors.selectCloudCodeDispatchId(state, ‘TARGET_NAME’)

dataProviders

Data provider components. Seamlessly bring Parse data into your Component with the ability to POST, PUT, DELETE from your component without connecting your component to store or run any action. all is in your props

FetchProps

Data provider component will render you component with all the props you pass to the dataComponent and with fetchProps object.

fetchProps is the default key but you can set your key, just pass fetchPropsKey inside dataProviders < FetchCollection fetchPropsKey=’res’

fetchProps include :

FetchDocument:

With FetchDocument you can get specific document by collection name and objectId

import {FetchDocument} from 'react-parse'
....
<FetchDocument 
	schemaName='Post'
	targetName='LastPost'
	objectId='blDxFXA9Wk'
	component={MyComponent} // or user render={(props)=> <MyComponent ...props/>}
	// optional:
	keys='title,body,owner'
	include='Owner'
	onFetchEnd={({error, status, data, info })=>{}}
	onPostEnd={({error, status, data, info, boomerang })=>{}}
	onPutEnd={({error, status, data, info, boomerang })=>{}}
	onDeleteEnd={({error, status, data, info, boomerang })=>{}}
	leaveClean={true} // remove data from store on componentWillUnmount
	localFirst={false} // fetch data from server only if we can found your data on local store
	localOnly={false} // never fetch data from server, only find in store
	autoRefresh={false} // Fetch data after each create/update/delete doc
	dataHandler={data => data} // Function to manipulate the data before set to store. 
	initialValue=
	// Want to pass something to your component, add here
	userName='Dan' // MyComponent will get this.props.userName
/>

<FetchCollection schemaName=’Post’ targetName=’LastPost’ component={MyComponent} // or user render={(props)=> <MyComponent …props/>} // optional: keys=’’ include=’’ onFetchEnd={({error, status, data, info })=>{}} onPostEnd={({error, status, data, info, boomerang })=>{}} onPutEnd={({error, status, data, info, boomerang })=>{}} onDeleteEnd={({error, status, data, info, boomerang })=>{}} leaveClean={true} // remove data from store on componentWillUnmount localFirst={false} // fetch data from server only if we can found your data on local store localOnly={false} // never fetch data from server, only find in store autoRefresh={false} // Fetch data after each create/update/delete doc query={object} // http://docs.parseplatform.org/rest/guide/#queries order=’’ // default is ‘-createdAt’, Specify a field to sort by skip={12} // skip first 12 documents limit={50} // limit query to 50 documents enableCount={true} // return the amount of results in db dataHandler={data => data} // Function to manipulate the data before set to store. // Want to pass something to your component, add here userName=’Dan’ // example />

#### FetchCloudCode:
With `FetchCloudCode` you can get list of document by collection name 
```jsx
import {FetchCloudCode} from 'react-parse'
....
<FetchCloudCode 
	functionName='GetPosts'
	params={object} // cloud code params
	targetName='GetPostsCloud'
	component={MyComponent} // or user render={(props)=> <MyComponent ...props/>}
	// optional:
	onFetchEnd={({error, status, data, info, boomerang })=>{}}
	leaveClean={true} // remove data from store on componentWillUnmount
	localFirst={false} // fetch data from server only if we can found your data on local store
	localOnly={false} // never fetch data from server, only find in store
	dataHandler={data => data} // Function to manipulate the data before set to store. 
	// Want to pass something to your component, add here
	userName='Dan' // example
/>

State

View to Your redux store: we use immutable-js and reselect

parse:{
	collections: {
		myProducts: {
			status: 'FETCH_FINISHED',
			error: null,
			loading: false,
			data: [....],
			info: {
				schemaName : '',
				query: {...},
				skip: 0,
				enableCount: false,
				keys,
				include,
				order,
				limit,
				count,
				timestamp
			}
		}
	},
  documents: {...},
  cloudCodes: {...}
	
}

Enum:

import {constants} from  'react-parse'

// FETCH

'FETCH_START','FETCH_FAILED','FETCH_FAILED_NETWORK','FETCH_FINISHED'

// POST

'POST_START','POST_FAILED','POST_FAILED_NETWORK','POST_FINISHED'

// DELETE

'DELETE_START','DELETE_FAILED','DELETE_FAILED_NETWORK','DELETE_FINISHED'

// PUT

'PUT_START','PUT_FAILED','PUT_FAILED_NETWORK','PUT_FINISHED'

Logger

First set the callbacks with setLoggerHandlers in each query your call back will run with => (type, action, status)

import {setLoggerHandlers} from 'react-parse'

setLoggerHandlers({
	onSuccess: (type, action, status)  => {
	 console.log('Send notification or something else:', type, action, status)
	},
		onError: (type, action, status)  => {
	 console.log('Send notification or something else:', type, action, status)
	}
})

loader

need a global loader?

import {ShowLoader} from 'react-parse'
class MyComponent extends React.Component {

  .....
    render() {
    	return (
		<ShowLoader render={(isLoading) => {
		isLoading ? <YourLoader /> : null
		}}/>
		)

CleanState

Need to clean the state ?

# Contribute You can help improving this project sending PRs and helping with issues.

This site is open source. Improve this page.