The error Actions must be plain objects is thrown. Use custom middleware for async actions?

Question

React

action.js

export const GET_LIST_POSTS = 'POSTS::GET_LIST_POSTS'
export const SET_LIST_POSTS = 'POSTS::GET_LIST_POSTS'
export const SET_STATUS_LOADING = 'POSTS::SET_STATUS_LOADING'
export const SET_STATUS_ERROR= 'POSTS::SET_STATUS_ERROR'
export const SET_STATUS_IDDLE= 'POSTS::SET_STSTUS_IDDLE'


export const getListPosts = () => ({type: GET_LIST_POSTS})
export const setStatusLoading = () => ({type: SET_STATUS_LOADING})
export const setStatusError = () => ({type: SET_STATUS_ERROR})
export const setStatusIddle = () => ({type: SET_STATUS_IDDLE})

reducer.js

...
case SET_LIST_POSTS: {
            return {
                ...state,
                list: action.payload.listPosts,
            }
        }
.....

sagas.js

import { put, takeEvery, call } from 'redux-saga/effects'
import { ADD_MESSAGE, ADD_MESSAGE_SAGA } from './actions/chats'
import { IS_ONLINE, TOGGLE_CHECKED } from './actions/profile'
import { GET_LIST_POSTS, SET_LIST_POSTS, setStatusLoading, setStatusError, setStatusIddle, SET_STATUS_LOADING, SET_STATUS_IDDLE, SET_STATUS_ERROR } from './actions/posts'

const delay =(ms) => new Promise(res => setTimeout(res, ms))

function* addMessageWorker(action) {
    yield put({ type: ADD_MESSAGE_SAGA, payload: action.payload })
    yield delay(1500)
    yield put({ type: ADD_MESSAGE_SAGA, payload: {chatId: action.payload.chatId, value: {autor: 'bot', text: 'message sent'}}})
}

function* toggleChecked (action) {
    let label = ''
    if (!action.payload) {
        label = 'user is online'
    }
    else {
        label = 'user is offline'
    }
    yield put({ type: IS_ONLINE, payload: { isChecked: !action.payload, label} })
}

function getListPosts () {
    return async (dispatch) => {
        dispatch(setStatusLoading())
        // ({ type: SET_STATUS_LOADING })
        
        try {
            const response = await fetch('https://jsonplaceholder.typicode.com/posts')

            if (!response.ok || response.status !== 200) {
                throw Error('Something went wrong')
            }

            dispatch(setStatusIddle())
            // ({ type: SET_STATUS_IDDLE })

            // dispatch({ type: SET_LIST_POSTS, payload: { listPosts: response.json() } })
            
            
        } catch (error) {
            console.error(error);
            dispatch(setStatusError())
            // ({ type: SET_STATUS_ERROR })
        }
    }
}
export function* chatWatcher() {
    yield takeEvery(ADD_MESSAGE, addMessageWorker)
    yield takeEvery(TOGGLE_CHECKED, toggleChecked)
    yield takeEvery(GET_LIST_POSTS, getListPosts)
}

export default chatWatcher;

Posts.js

import React from 'react'
import { Button } from '@material-ui/core'
import { useDispatch, useSelector } from 'react-redux'
import { POSTS_REQUEST_STATUS } from '../../store/reducers/posts' 
import { getListPosts } from '../../store/actions/posts'
import { CircularProgress } from '@material-ui/core'

function Posts () {

    const { list, status } = useSelector(state => state.posts)
    const dispatch = useDispatch()

    function getPosts () { 
        dispatch(getListPosts)
    }

    if (status === POSTS_REQUEST_STATUS.LOADING) {
        return <CircularProgress />
    }

    return (
        <div>
            <h2>Posts</h2>
            <Button onClick={getPosts}>Load posts</Button> 
            {status !== POSTS_REQUEST_STATUS.ERROR ? (
                <div>
                    {list.map(post => (
                        <div key={post.id}> 
                            <h4>{post.title}</h4>
                            
                            {post.body}
                        </div>
                    ))}
                </div>
            ) :  <h4>Error of Loading</h4>}

        </div>
    )

}

export default Posts

swears at getPosts

Answer 1

dispatch(getListPosts())