usdux

A frontend business framework，build-in common develop feature for fast build application, Build SPA application with MPA store, no redux but compat middlewares, the global store apply with React.createContext

• ✅ Build-in page and global store
• ✅ Hocs and hooks to access store
• ✅ Support redux middlewares
• ✅ Plugins execute when application start
• ✅ Integration react-router and allow jsonify router config
• ✅ Build-in error-boundary and allow customize
• ✅ Build-in routerError page and allow customize
• ✅ Build-in auth page logic
• [todo] Build-in key title description with router
• [todo] support React suspence and lazy import
• [todo] support ssr

Install

npm i usdux -S

Usage

quick start

write following code in index.js which starts application

import App from 'usdux'

App({
  routerConfig: {
    staticRouters: [{
      prefix: '/center',
      layout: (props) => props.children,
      title: 'example 1',
      routers: [{
        title: 'home',
        component: () => <div>hello world!</div>,
        path: '/1'
      }]
    }]
  },
})

Class Component

import React from 'react'
import { connect } from 'usdux'

export default @connect class Component extends React.Component {
  handleClick = () => {
    this.props.dispatch({type: 'setGlobal', payload: {a: 1}})
  }

  render() {
    return (<div>
      <div onClick={this.handleClick}>{JSON.stringify(this.props._global_)}</div>
      <div>{JSON.stringify(this.props._page_)}</div>
    </div>)
  }
}

Functional Component

import React from 'react'
import { useStore } from 'usdux'

export default const Component = () => {
  const [store, dispatch] = useStore()
  const handleClick = () => {
    dispatch({type: 'setPage', payload: {a: 1}})
  }

  return (<div>
      <div>{JSON.stringify(store._global_)}</div>
      <div onClick={handleClick}>{JSON.stringify(store._page_)}</div>
    </div>)
}

Store Action

• setGlobal set global state

dispatch({type: 'setGlobal', payload: 'xxx'})

• resetGlobal reset global state

dispatch({type: 'resetGlobal'})

• setPage set page state

dispatch({type: 'setGlobal', payload: 'xxx'})

• resetPage reset page state

dispatch({type: 'resetPage'})

middlewares

In theory, compat redux-chunk middewares :）

Options

{
  checkLogin: 'function',
  checkAuth: 'function',
  getDynamicRouters: 'function',
  pageError: {
    fallback: 'ReactNode || stirng',
    noMatch: 'ReactNode || string',
    noAuth: 'ReactNode || string',
  },
  staticRouters: [{
    layout: 'ReactNode || string',
    prefix: 'string',
    title: 'string',
    needLogin: 'boolean',
    pageError: {
      fallback: 'ReactNode || stirng',
      noMatch: 'ReactNode || string',
      noAuth: 'ReactNode || string',
    },
    routers: [{
      title: 'string',
      authKey: 'string',
      path: 'string || array',
      needAuth: 'boolean',
      component: 'ReactNode || string',
    }],
  }]
}