Package Exports

react-isomorphic-tools
react-isomorphic-tools/middlewares/preload
react-isomorphic-tools/reducers/immutable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-isomorphic-tools) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-isomorphic-tools

This library contains many tools when helps to build SSR such as:

Fetcher, fetchToState

Authorization (react-cookie)

Preload Data to component on client

Load(fetch) data on server side

helpers...

Auth

import {Auth} from 'react-isomorphic-tools'

methods:

setToken
setRefreshToken
getToken
getRefreshToken
isAuthenticated
logout
setTokenName || default 'token'
setRefreshTokenName || default 'Bearer '
setTokenPrefix
getTokenPrefix

setToken - establishes working token for Fetcher&&FetchToState When calling Fetcher() if isAuthenticated() === true then add to headers key Authorization = getTokenPrefix()+getToken()

If token is outdated (and refresh token is set) server must respond http status code == 401 for that would run process token refresh Will be send POST request to http://BaseUrl/token/refresh with params:{refreshToken} and Fetcher will wait new token and refreshToken for update then follow rerequest

Fetcher

import {fetcher, setBaseUrl} from 'react-isomorphic-tools'


setBaseUrl('http://api.itboost.org/app_dev.php/api')

fetcher('/events', {
  method: 'GET', /* default 'GET') */
  params:{},
  baseUrl: null, /* custom baseUrl */
  type: 'form-data' /* (default json) */
})

all parameters will be added to request as query string if method == ('GET'||'DELETE') other in request body

FetchToState

import React from 'react'
import {connect} from 'react-redux'
import {fetchToState} from 'react-isomorphic-tools'

@connect(state=>({
    eventsShow: state.getIn(['fetchData', 'eventsShow'])
}),{fetchToState})
export default class App extends React.Component{
   
    componentDidMount = () => {
        const {fetchData, params} = this.props
        fetchToState(`/events/${params.id}`, {
            params:{
                key: 'value'
            },
            key: 'eventsShow',
            method: 'GET', 
            baseUrl: 'http://example.com/api'
        })
    }
}

Decorator Preload

import React from 'react'
import {preload} from 'react-isomorphic-tools'
import {connect} from 'react-redux'

@preload(({fetchToState})=> {
    return fetchToState('/events', {
        key: 'eventsList'
    })
})
@connect(state=>({
    eventsList: state.getIn(['fetchData', 'eventsList'])
}))
export default class Page extends React.Component {
    static displayName = 'TestPage'

    render() {
        return (
            <div>
            </div>
        )
    }
}

In preload(preload, restProps)

preload contains:

getState
dispatch
routes
params
location
router
fetcher
fetchToState: (url, params) => dispatch(fetchToState(url, params))