rshaibakov
@rshaibakov
Web-разработчик

Как сделать экшены асинхронными в Redux + AngularJS?

Достался мне один проектик. Пытаюсь его апгрейдить и решил добавить в него redux
Застрял на одном моменте. Выходит ошибка "Actions must be plain objects. Use custom middleware for async actions". Я понимаю что она означает. Но не понимаю почему она возникает

Вот так регистрирую в конфиге приложения стор:
$provide.factory('injectMiddleware', ($http) => {
  return thunk.withExtraArgument({ $http })
})

$ngReduxProvider.createStoreWith(
  store,
  ['injectMiddleware'],
  process.env.DEBUG
    && window.__REDUX_DEVTOOLS_EXTENSION__
    && [window.__REDUX_DEVTOOLS_EXTENSION__()]
)

Вот так выглядит редюсер с экшенами:
const initialState = {
  current: null
}
export const UsersReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_CURRENT':
      return {
        ...state,
        ...action.payload
      }
    default:
      return state
  }
}
export const UsersActions = {
  async getCurrentUser () {
    return async (dispatch, getState, { $http }) => {
      await Promise.resolve({
        type: 'SET_CURRENT',
        payload: { name: 'Вася' }
      })
    }
  }
}

Контроллер:
import { UsersActions } from 'storage/users'
class HomeController {
  constructor ($ngRedux) {
    this.unsubscribe = $ngRedux.connect(this.mapState, UsersActions)(this)
  }
  $onInit () {
    this.getCurrentUser()
  }
  $onDestroy () {
    this.unsubscribe()
  }
  mapState (state) {
    return {
      currentUser: state.user.current
    }
  }
}

Понимаю что проблема не нова. В гугле полным полно людей сталкивались с ней. Но почему то в моем случае все их решения не помогли.

Для асинхронности в экшенах я использовал мидлвэр redux-thunk. Я дебажил код и заметил, что в этот мидлвэр, экшен приходит как объект, а должна как функция. Как такое может быть если мой экшен возвращает функцию, мне не ясно?
  • Вопрос задан
  • 131 просмотр
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы