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'] |

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).

| prop or func | type | description | | ------------ | ------------ | ------------ | | createStore | func | create the redux store with the params rootReducer, {configThunk, routeType, defaultRoute, middlewares}(eg: thunk,saga,logger) | | createInitialState | func | create the initialState based on feature reducer with the params config | | createActionType | func | create the action type with the params config (for emit async event) | | createAction | func | create the sync action with the params params{config,actionKey[,actionType]},payload | | createAsyncAction | func | create the async action with the params promise,params{config,actionKey[,actionType]},handler | | createReducer | func | create the sync reducer with the params state,action,params{config,actionKey[,actionType]},handler | | createAsyncReducer | func | create the async reducer with the params state,action,params{config,actionKey[,actionType,resultField]} | | createFeatureReducer | func | create the feature reducer with the params reducers,state,reducer,handler | | createAppReducer | func | create the app reducer with the params reducers,state,reducer | | clearRedux | func | clear all redux data(only when user will exit the 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.

| prop or func | type | description | | ------------ | ------------ | ------------ | | store | object | the app redux store created by ReduxFactory | | routes | array | the app router included all component routes | | routeType | string | the route type default as 'hash' | | checkIsAuth | func | check if the user is authenticated | | redirectUrl | string | if the user isn't authenticated, it will redirect the page (usually login) | | redirect404 | string | if the route doesn't be matched, it will redirect the page (usually 404) |