arthur

基于业务形成的一个业务框架 ( Inspired by dva )

安装

$ npm install @dx-groups/arthur --save

$ yarn add @dx-groups/arthur

用法

module.js

项目中使用 redux 管理状态库，当希望改变状态库的 state 时,使用 dispatch 发起一个 action ，根据 actionType 调用 reducers 改变 state 。arthur 中一个 module.js 包含了一个功能模块的 store、action、reducer 的实现。

import pageModule from './page/module'

// actionType
const GET_FIRST_LIST = 'spa/Arthur/GET_FIRST_LIST' 

export default {
  // 不能为空,组件会通过 namespace 访问state
  namespace: 'arthur',
  // 初始状态 state
  state: {
    first: ''
  },
  // redux actions，支持 redux-thunk 及 redux-promise 
  actions: {
    getFirstList(arg) {
      return dispatch => {
        dispatch({
          type: GET_FIRST_LIST,
          payload: {
            name: 'first'
          },
        })
      }
    }
  },
  // redux reducers, 同步操作用于更新 state
  reducers: {
    [GET_FIRST_LIST]: (state, action) => ({
      ...state,
      first: action.payload,
    })
  },
  children: [
    // 下级module.js
    pageModule
  ]
}

组件引入

import React, { Component } from 'react'
// 此 connect 方法是对 react-redux 中 connect 方法进行了二次封装
import { connect } from '@dx-groups/arthur'
class Page extends Component {
  render() {
    const { first } = this.props
    return (<div>{ first }</div>)
  }
}

const mapStateToProps = (state) => {
  return {
    // ...state.arthur.page 依然支持
    ...state['arthur.page']
  }
}

// 不需要 mapDispatchToProps 方法，store.dispatch 已经在 arthur 框架内塞入组件的 props 中
export default connect(['common.showListSpin', 'arthur.page'],mapStateToProps)(Page)

整合 module.js

import arthur from '@dx-groups/arthur'
import { createBrowserHistory } from '@dx-groups/arthur/history'
import Router from './router'
import arthurModule from '../modules/Arthur/module'

// 1. initialize
const app = arthur({
  history: createBrowserHistory()
})

// 2. execute initialization codes
app.init(() => dispatch => {
  
})

// 3. modules
app.modules([
  arthurModule,
])

// 4. router
app.router(Router)

// 5. start
app.start('#root')

export default app._store
  

DEMO

API

• @dx-groups/arthur

  默认输出 arthur

  另外，还有两个方法

  • connect

    此 connect 方法是对 react-redux 中 connect 方法的二次封装

  • createAction

    是对 redux-actions 中 createAction 方法的映射，用于生成 Flux Standard Action

• @dx-groups/arthur/history

  输出 history 的接口

• @dx-groups/arthur/redux

  输出 redux 的接口

• @dx-groups/arthur/router

  输出 react-router 的接口

• @dx-groups/arthur/routerDom

  输出 react-router-dom 的接口

• @dx-groups/arthur/routerRedux

  输出 react-router-redux 的接口