@bpGusar
*spoiler*

Почему вываливается Actions must be plain objects. Use custom middleware for async actions если мидл подключен?

store.tsx
import {
  createStore as createReduxStore,
  applyMiddleware,
} from 'redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension'
import rootReducer from './reducers'
import {configJsonSchema} from '../json-schemas'
import validateConfig from '../app/validate-config'
import {Config} from '../types'

const parseConfig = (jsonConfig: Config): any => {
  return {
    config: jsonConfig,
  }
}

export default function createStore(config: Config): any {
  const initialState = parseConfig(config)
  const checkSchemaResult = validateConfig(
    config,
    configJsonSchema,
  )
  if (checkSchemaResult === true) {
    return createReduxStore(
      rootReducer,
      initialState,
      composeWithDevTools(applyMiddleware(thunk)),
    )
  } else {
    throw checkSchemaResult
  }
}


index.tsx
import 'babel-polyfill'
import * as React from 'react'
import {render} from 'react-dom'
import {Provider} from 'react-redux'
import App from './ui/app'
import createStore from './store/store'
import {Config} from './types'

export default function initFeature(options: {
  rootEl: HTMLElement
  config: Config
}): void {
  render(<Component config={options.config} />, options.rootEl)
}

export const Component: React.SFC<{config: Config}> = (
  props: any,
): any => {
  return (
    <Provider store={createStore(props.config)}>
      <App />
    </Provider>
  )
}


Условная функция которая вызывает экшн:
private handleSetCountryInStore = (
    e: React.FormEvent<HTMLButtonElement>
  ): any => {
    const countryId: number = Number(e.currentTarget.dataset.id);
    this.props.selectCountry(this.props.config.countries[countryId]);
  };


Экшн:
он просто пока для проверки работы
const selectCountry = (country: any): any => {
  console.log(country);
};


В консоле дважды ошибка после срабатывания экшена:
Actions must be plain objects. Use custom middleware for async actions


Что не так в данном коде? createStore создан по докам, мидл есть, но выдает ошибку.
  • Вопрос задан
  • 11119 просмотров
Решения вопроса 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
const selectCountry = (country: any): any => {
  console.log(country);
  return {
     type: 'MY_TEST_ACTION',
  }
};


если используете короткую запись, то console.log не добавить. Не забывайте про type
const selectCountry = (country: any): any => ({ // добавилось (
  type: 'MY_TEST_ACTION',
}); // добавилось )


ну и собственно проблема: текст ошибки после перевода: экшен должен быть объектом. У вас было undefined, так как не было return { }
Так же у экшена, обязательно должно быть поле type
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы