Javascript 使用async/await创建一个存储时会给出以下提示：“No No No modHFGen.dll；警告：失败的道具类型：道具'store.subscribe'`

我试图异步加载存储，但出现错误。由于firebase/firestore中间件（400kb+），我尝试这样做是为了最终延迟加载存储。如果我能让这个测试工作，我会动态导入。但是，提供商似乎不喜欢这样。有人能提出一个工作建议吗？我已经画了一支笔来说明

HTML:

JS:

const thunk=reduxtunk.default
const{Provider，connect}=ReactRedux
const{createStore，applyMiddleware}=Redux
类应用程序扩展了React.Component{
handleAdd=（）=>{
this.props.addValueLazy（）
}
handleCut=（）=>{
this.props.cutValue（）
}
render（）{
const{value}=this.props
返回(
柜台
)
}
}
常量计数器=（{value，onAdd，onCut}）=>(
{value}
懒散添加
削减
)
const ActionTypes={
添加值：“添加值”，
剪切值：“剪切值”
}
功能图DispatchToprops（调度）{
返回{
addValueLazy:（）=>分派（addValueLazy（）），
cutValue:（）=>分派（cutValue（）），
派遣
}
}
函数MapStateTops（状态）{
返回{
值：state.value
}
}
常量initialState={value:0}
功能计数器（状态=初始状态，动作）{
开关（动作类型）{
案例操作类型。添加值：
返回{
值：state.value+1
}
案例ActionTypes.CUT_值：
返回{
值：state.value-1
}
违约：
返回状态；
}
}
函数addValueLazy（）{
返回功能（调度）{
返回setTimeout（（）=>dispatch（addValue（）），300）
}
}
函数addValue（）{
返回{
类型：ActionTypes.ADD\u值
}
}
函数cutValue（）{
返回{
类型：ActionTypes.CUT\u值
}
}
const AppWithState=connect（mapStateToProps、mapDispatchToProps）（应用程序）
异步函数storeMaker（）{
返回等待createStore（计数器、初始状态、，
applyMiddleware（thunk）
)
}
const store=storeMaker（）；
常量根=（）=>(
)
ReactDOM.render(
,
document.querySelector（“#root”），
)

异步函数总是返回一个无效的存储类型的承诺，使

storeMaker

成为常规函数。等待

createStore

无论如何都不会有任何作用。Hi Asaf Aviv，感谢您的留言。你建议如何实现我的目标？非常感谢。

div#root

const thunk = ReduxThunk.default
const { Provider, connect } = ReactRedux
const { createStore, applyMiddleware } = Redux

class App extends React.Component {
  handleAdd = () => {
    this.props.addValueLazy()
  }
  handleCut = () => {
    this.props.cutValue()
  }
  render() {
    const { value } = this.props
    return (
      <div className="wrapper">
        <h1 className="title">Counter</h1>
        <Counter 
          value={value}
          onAdd={this.handleAdd}
          onCut={this.handleCut}
        />
      </div>
    )
  }
}

const Counter = ({ value, onAdd, onCut }) => (
  <section className="count-container">
    <div className="value">{value}</div>
    <div className="buttonGroup">
      <button onClick={onAdd}>LAZY ADD</button>
      <button onClick={onCut}>CUT</button>            
    </div>
  </section>
)

const ActionTypes = {
  ADD_VALUE: 'ADD_VALUE',
  CUT_VALUE: 'CUT_VALUE'
}

function mapDispatchToProps(dispatch) {
  return {
    addValueLazy: () => dispatch(addValueLazy()),
    cutValue: () => dispatch(cutValue()),
    dispatch
  }
}
function mapStateToProps(state) {
  return {
    value: state.value
  }
}
const initialState = { value: 0 }
function counterReducer(state = initialState, action) {
  switch(action.type) {
    case ActionTypes.ADD_VALUE:
      return {
        value: state.value + 1
      }
    case ActionTypes.CUT_VALUE:
      return {
        value: state.value - 1
      }
    default: 
      return state;
  }
}
function addValueLazy() {
  return function(dispatch) {
    return setTimeout(()=>dispatch(addValue()), 300)
  }
}
function addValue() {
  return {
    type: ActionTypes.ADD_VALUE
  }
}
function cutValue() {
  return {
    type: ActionTypes.CUT_VALUE
  }
}
const AppWithState = connect(mapStateToProps, mapDispatchToProps)(App)


async function storeMaker() {
  return  await createStore(counterReducer, initialState,
  applyMiddleware(thunk)
)

}

const store = storeMaker();


const Root = () => (
  <Provider store={store}>
    <AppWithState />
  </Provider>
)
ReactDOM.render(
  <Root />,
  document.querySelector('#root'),
)