Redux / thunk Ошибка: действия должны быть простыми объектами.Использовать пользовательское промежуточное ПО для асинхронных действий

Question

Я новичок в Redux и следил за этим видео https://www.youtube.com/watch?v=93p3LxR9xfM, чтобы внедрить Redux в мой шаблон MERN, однако он продолжает падать из-за ошибки: «Действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий."

Я полагаю, что проблема может быть где-то в функции отправки, но не могу найти ее.

Получить файл:

   `export function fetchPosts () {
    return function(dispatch) {
     fetch('http://localhost:5000/products/5d082bb89501e113334e5c8e')
     .then(res => res.json())
     .then(posts => dispatch({
      type: FETCH_POSTS,
      payload: posts
       })
   );
  }
 } `

компонент: class MyComponent extends React.Component { componentWillMount() { this.props.fetchPosts(); }<br> render() { return ( <div></div> ); } }; export default connect(null, { fetchPosts })(MyComponent);

Answer 1

Действие fetchPosts возвращает функцию, тогда как ожидалось, что она вернет простой объект.

Возвращение функции требуется для асинхронных операций в избыточном коде. Но вам нужно подключить middleware под названием redux-thunk.

https://github.com/reduxjs/redux-thunk

Так что эта ошибка исчезнет.

---

Как подключиться redux-thunk:

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'

import rootReducer from './reducers'

const store = createStore(
  reducers, // your reducers
  compose(
    applyMiddleware(thunk)
  )
)