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)