React Model
A JAVASCRIPT LIBRARY FOR BUILDING DATA-DRIVEN REACT APPLICATIONS
As we know, React has no networking/AJAX features. And you can see in this article: http://andrewhfarmer.com/react-ajax-best-practices/, we have many approach to make an AJAX request in React app.
I like Relay, especially Higher-Order Components pattern but it only works with GraphQL. Then I make a small library based on Relay concept and it works with RESTful backends.
Installation
You'll need both React and React Model:
Containers
Create a React component with Store
decorator:
import React, { Component } from 'react'
import { Xhr, MutationType, Store } from 'rc-model'
Xhr.BASE_URL = '/api'
@Store({
endpoint: 'system'
})
class MyComponent extends Component {
render() {
const { TestData } = this.props.store.data
return <div>
<p>{JSON.stringify(TestData)}</p>
</div>;
}
}
export default MyComponent
You can setup network layer throught Xhr.BASE_URL. In this case, when you setup Xhr.BASE_URL = '/api'
, every AJAX requests will call to http://<IP Server>:<Port>/api/
You need to setup the endpoint to make an AJAX request to http://<IP Server>:<Port>/api/<endpoint>
throught Container
decorator:
@Store({
endpoint: 'system'
})
The response data will be pushed to this.props.store.data
.
In case you want to add some query params, just change the endpoint fragment:
@Store({
endpoint: {
name: 'system',
initialVariables: () => {
return {
page: 1,
size: 20
}
}
}
})
If you want to do something with the response data before it's pushed to props, just add the next
function like below:
@Store({
endpoint: 'system',
next: response => {
// Do something with response before return
return response
}
})
Mutations
Add mutations fragment into Container
decorator, type can be MutationType.POST, MutationType.PUT, MutationType.DELETE.
@Store({
endpoint: 'system',
mutations: {
login: {
type: MutationType.POST,
path: 'security/login'
}
}
})
As you can see from above, we add login
to mutations fragment as a POST request and it will call to http://<IP Server>:<Port>/api/security/login
Then you can call login
as a function like this:
handleLogin() {
this.props.store.login({
record: {
Id: "my_id",
Password: "my_password"
},
next: response => {
console.log(response)
},
error: () => {
console.error('Error!!!')
}
})
}
We pass an object as a parameter into login function with the format:
{
record: { ... }, // data to be sent to the server
next: response => { ... }, // a function to be called if the request succeeds.
error: response => { ... } // a function to be called if the request fails.
complete: response => { ... } // a function to be called if the request fails.
}
Handle when Ajax complete
You can register a handler to be called when Ajax requests complete (with an error):
import { Xhr } from 'rc-model'
Xhr.ajaxBefore = () => {
console.log('Ajax Before')
}
Xhr.ajaxError = (error) => {
console.log('Ajax Error!!!')
}
Xhr.ajaxComplete = () => {
console.log('Ajax Complete')
}
License
rc-model is released under the MIT license.