m2-redux v1.1.8

m2-redux

The package is provided factory and utilities based on redux.

You can learning the M2 architecture via visiting: https://app.yinxiang.com/fx/c541e662-a573-47e0-af9c-b98d4ca52714

Usage

• Install

npm install m2-redux
yarn add m2-redux

APIs

• Root class The application Root component with react and redux, will connect the store and router.

  import React from 'react'
  import { render } from 'm2-react'
  import { Root } from 'm2-redux'
  import Loading from '@/features/common/components/loading'
  import AppRouter from '@/features/app/router' 
  import AppStore from '@/features/app/redux/store'
  
  /* 有以下几种使用方式: */
  // 1. 通过Redux Root组件渲染
  render(
    <Root {...AppStore} {...AppRouter}/>
  )
  
  // 2. 通过Redux Root组件渲染多组件(使用components属性)
  render({
    components: [
      <Loading key="loading"/>,
      <Root {...AppStore} {...AppRouter} key="root"/>
    ],
    root: 'app' // 指定DOM根元素id,默认为'root'
  })

- connect **function** Encapsulate connect from 'react-redux' and provide "reducers", "actions" and "types" options.
 ####
 | param | type | description | default | example |
 | ------------ | ------------ | ------------ | ------------ | ------------ |
 | reducers | string/array | redux feature name(s) |  | 'home', ['home', 'auth'], ['home,auth'] |
 | actions | object | redux action(s) from the feature |  | { getDataList, getDictList } 
 | types | string/array | dictionary name(s) |  | 'gender', ['userType', 'gender'], ['userType,gender'] |
```js
import React from 'react'
import { connect } from 'm2-redux'
import { getDataList, getDictList } from '@/features/home/redux/actions'
import './index.less'

@connect({ reducers: ['home', 'auth'], actions: { getDataList, getDictList } })
class HomePage extends React.Component {
  // ...
  componentDidMount() {
    const { getDataList, getDictList } = this.props
    getDataList()
    getDictList()
  }
  
  render() {
    const { home, auth } = this.props
    return (
      <div>
        { home.list } -- { auth.user }
      </div>
    )
  }
}

• ReduxFactory class The factory will create store, initialState, actionType, action(sync/async), reducer(sync/async/feature/app).

// create the store
import { ReduxFactory } from 'm2-redux'
import rootReducer from '@/features/app/redux/reducers'

const store = ReduxFactory.createStore(rootReducer, { defaultRoute: 'home' })
const checkIsAuth = () => store.getState().auth.loginUser.authenticated

export default {
  store,
  checkIsAuth
}

// create the action & reducer (sync)
import { ReduxFactory } from 'm2-redux'
import config from '@/features/home/redux/config'

const params = { config, actionKey: 'list' }

export const action = () => ReduxFactory.createAction(params)
export const reducer = (state, action) => ReduxFactory.createReducer(state, action, params, () => action.payload)

// create the action & reducer (async)
import { ReduxFactory } from 'm2-redux'
import config from '@/features/common/redux/config'
import { commonService } from '@/features/app/service'

const params = { config, actionKey: 'dict' }
const promise = commonService.getDictList

export const action = () => ReduxFactory.createAsyncAction(promise, params)
export const reducer = (state, action) => ReduxFactory.createAsyncReducer(state, action, params)
export const type = ReduxFactory.createActionType(params)

// create the feature reducer
import { ReduxFactory } from 'm2-redux'
import { reducer as getDataListReducer } from '@/features/home/redux/controllers/getDataList'
import { reducer as getDataItemReducer } from '@/features/home/redux/controllers/getDataItem'
import config from '@/features/home/redux/config'

const reducers = [
  getDataListReducer,
  getDataItemReducer
]

const initialState = ReduxFactory.createInitialState(config)

export default (state = initialState, action) => ReduxFactory.createFeatureReducer(reducers, state, action)

// create the app reducer
import { ReduxFactory } from 'm2-redux'
import commonReducer from '@/features/common/redux/reducers'
import homeReducer from '@/features/home/redux/reducers'
import authReducer from '@/features/auth/redux/reducers'

const reducerMap = {
  common: commonReducer,
  home: homeReducer,
  auth: authReducer
}

export default (state, action) => ReduxFactory.createAppReducer(reducerMap, state, action)

• Root class The root component integrate Router, Store by Provider.