Создание магазина с помощью async / await дает: «Предупреждение: сбойный тип проп: проп` store.subscribe` - PullRequest
Новая
       0

Создание магазина с помощью async / await дает: «Предупреждение: сбойный тип проп: проп` store.subscribe`

0 голосов
/ 25 января 2020

Я пытаюсь загрузить магазин асинхронно, но получаю ошибки. Я пытаюсь сделать это как wi sh, чтобы в конечном итоге лениво загрузить магазин из-за тяжелого промежуточного программного обеспечения firebase / firestore, 400kb +. Если бы я мог заставить этот тест работать, я бы тогда импортировал динамически. Однако, похоже, что провайдеру это не нравится. Кто-нибудь может предложить обходной путь? Я создал перо для иллюстрации https://codepen.io/Haalix/pen/ZEYPrmG?editors=1111

HTML: 

div#root

JS: 

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