react-isomorphic-tools

Motivation

The first thing of motivation to make this library it was an idea to gather together all features what my team is used in projects that we was designed in that time. The second thing it is that what I wanted to make just open source library to help people to decide own problems with which I faced. The third thing it is that I wanted to grow up, and I wanted to involve more people to this project and that they are also can design auxiliary library is better.

Functionality

• • Load data
  • • before transition in Client Side
  • • Load data in Server Side it is making the store with all data what it needs to render application is properly
• • Autorization System
  • • Store token, refresh token in cookie and work with them
  • • Fetching remote resource with token
  • • Limitation before transition, for example: if you haven't properly role (redirects)
• • Chunks
  • • Load chunks like remote resource over fetch but just chunk for app, we can define in routes config the function that will return promise, example you can see below
• • Handle Errors
  • • If application has an error before transition you will redirect to error page with detail info about the error
  • • The same for server side, you just will redirect by expressjs to another route for detail info about error

Boilerplate

https://github.com/aleksdp/react-isomorphic-example

Descriptions

reducers

• authentication
• fetchData
• navigator
• modals

Authentication it is stores current user data, you can rewrite this reducer for yourself

FetchData - it is common reducer that stores all fetched data from remote server

Navigator reducer needs to store info about browser what you are using and current locale

Modals - it is common reducer to store data about opening or closing modals window

settings

You can define baseUrl, locale, userAgent like this:

import {
    setBaseUrl,
    setLocale,
    setUserAgent
} from 'react-isomorphic-tools'


setBaseUrl('http://github.com/api')
setLocale('en')
setUserAgent(req.headers.get('user-agent'))

actions

Authorization

// actions/authorization.js
import {fetcher} from 'react-isomorphic-tools'
import {AUTH_LOGIN_SUCCESS, AUTH_LOGOUT_SUCCESS} from 'react-isomorphic-tools/lib/constants'

const onSubmit = async (form) => dispatch => {
  const user = await fetcher('/login', { //if your endpoint is returns object of current user we can catch it and put to store
    method: 'POST',
    params: {
      login: form.login,
      password: form.password
    }
  })
  dispatch({
    type: AUTH_LOGIN_SUCCESS,
    payload: user
  })
}

const logout = () => dispatch => {
  dispatch({
    type: AUTH_LOGOUT_SUCCESS // will remove current user from store
  })
}

Navigator

import {setLocale, setUserAgent} from 'react-isomorphic-tools'

//you can use it something like this

const defaultLocale = 'en'
const userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36'

store.dispatch(setLocale(defaultLocale))
store.dispatch(setUserAgent(userAgent))

It's more neccessary for server side rendering to define locale and userAgent that rendering will properly

Modals

import {openModal, closeModal, closeAllModals} from 'react-isomorphic-tools'

const open = () => dispatch => {
  dispatch(openModal('test'))
}

const close = () => dispatch => {
  dispatch(closeModal('test'))
}

const closeAll = () => dispatch => {
  dispatch(closeAllModals())
}

Preload actions (fetchData reducer)

There are two options how to use fetchData

// actions/posts.js
//// first

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

const fetchItems = (userId) => dispatch => {
  return dispatch(fetchToState('/posts', { // will return promise
    key: 'posts',
    method: 'GET',
    params: {
      filter:{
        userId
      }
    }
  }))
}

//// second
import {fetcher} from 'react-isomorphic-tools'
import {request, success, fail} from 'react-isomorphic-tools/lib/actions/fetchToState'

const fetchItems = async (userId) => dispatch => {
  const key = 'posts'
    const object = { 
      method: 'GET',
      params: {
        filter:{
          userId
        }
      }
    }
    const url = '/posts'
    
  try{
    
    request({key, request: {params: object.params, url}})
    
    const posts = fetcher(url, object) // will return promise
    
    success({key, request: {params: object.params, url}, response: posts})
    
  }
  catch(e){
    dispatch(fail({key, e}))
  }
}

Don't you seem that the first example is simpler?) Yes, the function fetchToState just wrapped fetcher but for it we need to define key, to tell reducer that we want to store data in defined key of store. It's simple, we want to make these things simpler!

Usage fetchToState in Container

// containers/posts.jsx
import React from 'react'
import {connect} from 'react-redux'

@connect(state=>({
  posts: state.fetchData.posts && state.fetchData.posts.response,  // you can subscribe to only response or...
  postsObject: state.fetchData.posts  // subscribe to whole object, it includes response and request object
}))
export default class PostsContainer extends React.Component {
  render(){
    console.log(this.props.posts)
    console.log(this.props.postsObject)
    return null
  }
}

fetcher && fetchToState

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


fetcher('/posts', {
    method: 'GET', // name of method,
    params: { // will stringify by `qs` library only 
      filters: {
          eq: 'freshly'
      }
    }
})

fetcher(url, options)

• options.params: object will stringify and attached to request body. Only for method GET it will attached to query string with qs library
• options.queryParams: object will stringify with qs library and attached to query string for all method except GET method
• options.type: null || form-data - default null, if defined form-data You can attach form data object to params it will attach directly instead of stringify to string
• options.baseUrl: string custom rewrite baseUrl for request
• options.method: string in APPERCASE || 'GET' - default
• options.customHeaders: object || default it uses internal object of header that includes authorization token
• options.key = string || 'undefined' - default // only for fetchToState

Link & NavLink

import {Link, NavLink} from 'react-isomorphic-tools'

const component = () => {
    return (
        <div>
            <Link {...props}/>
            <NavLink {...props}/>
        </div>
    )
}

• props - the same that defined for react-router v4 with some changes
• props.to.query: object will stringify with qs library and attach to to.search :object