App.tsx

import store from './store'

export function render (container: any) {
  if (!container) {
    container = document.createElement('div')
    container.id = ENGINE_CONTAINER
    document.body.appendChild(container)
  }

  ReactDOM.render(
    <ReduxProvider store={store}>
      <NextConfigProvider prefix={CSS_PREFIX}>
        <StyledThemeProvider theme={ENGINE_THEME}>
          <Engine />
        </StyledThemeProvider>
      </NextConfigProvider>
    </ReduxProvider>,
    container
  )
}

Family.ts

import { createStore, combineReducers , applyMiddleware, compose } from "redux";
import createSagaMiddleware from 'redux-saga'
import { takeEvery } from 'redux-saga/effects'
import logger from 'redux-logger'

export * from 'react-redux'
export * from 'redux-saga/effects'

declare global {
  interface Window { __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any; }
}

const sagaMiddleware = createSagaMiddleware()

export function createModelStore (...models: any[]) {
    const mappedReducers = models.reduce((acc: any, model: any) => {
      const { namespace, reducers = {} } = model
      const nextReducers = Object.entries(reducers).reduce((acc: any, entry: any) => {
        const [type, reducer] = entry
        acc[`${namespace}/${type}`] = reducer
        return acc
      }, {})
      acc[namespace] = (state: any = {}, action: any) => {
        const { type, payload } = action
        if (nextReducers[type]) return nextReducers[type](state, payload)
        return state
      }
      return acc
    }, {})
    
    const preloadedStates = models.reduce((acc: any, model: any) => {
      const { namespace, state } = model
      acc[namespace] = state
      return acc
    }, {})

    function * rootSaga () {
      for (let model of models) {
        const { namespace, effects } = model
        for (let pattern in effects) {
          yield takeEvery(`${namespace}/${pattern}`, effects[pattern])
        }
      }
    }
  
    // https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
    const store = createStore(
      combineReducers(mappedReducers),
      preloadedStates,
      composeEnhancers(
        applyMiddleware(
          // logger,
          sagaMiddleware
        )
      )
    )

    sagaMiddleware.run(rootSaga)

    return store
  }
  

store.js

export const Engine: any = {
  namespace: 'engine',
  state: {
    // 语言类型 zh_CN | en_US
    locale: 'zh_CN',
    // 驱动类型 CODE|SCHEMA
    driver: DRIVER.SCHEMA,
    // 设备类型 PC|PAD|MOBILE
    device: DEVICE.PC,
    // 组件
    components: ComponentsBundle,
    // 会话数据
    session: {},
    // 键盘快捷键
    hotkeys: [
      { keys: ['command+b'], onKey: (event: any, shortcut: any) => {
        event.preventDefault()
        console.log(shortcut, event.type, event)
      }}
    ]
  },
  reducers: {
    set(state: any = {}, payload: Object) {
      return { ...state, ...payload }
    },
    driver (state: any = {}, payload: Object) {
      return { ...state, driver: payload }
    },
  }
}

export default createModelStore(Engine)