Actions must be plain objects. Use custom middleware for async actions. not solving with previous techniques on stackoverflow

Question

Actions File

import * as AuthApi from "../api/AuthApi.js"
export const logIn=(formData)=>async(dispatch)=>{
    dispatch({type:"AUTH_START"})
    try {
        const data=await AuthApi.logIn(formData)
        dispatch({type:"AUTH_SUCCESS",data:data})
    } catch (error) {
        console.log(error)
        dispatch({type:"AUTH_FAILED"})
    }
}
export const signUp=(formData)=>async(dispatch)=>{
    dispatch({type:"AUTH_START"})
    try {
        const {data}=await AuthApi.signUp(formData)
        dispatch({type:"AUTH_SUCCESS",data:data})
    } catch (error) {
        console.log(error)
        dispatch({type:"AUTH_FAILED"})
    }
}

Reducers File

const authReducer=(state={authData:null,loading:false,error:false},action)=>{
        switch (action.type) {
            case "AUTH_START":
                return {...state,loading:true,error:false}
            case "AUTH_SUCCESS":
                //also storing the data in local storage 
                localStorage.setItem("profile",JSON.stringify({...action?.data}))
                return {...state,loading:false,authData:action.data}
            case "AUTH_FAILED":
                return {...state,error:true,loading:false}
            default:
                return state
        }
}
export default authReducer

Combine Reducer

import { combineReducers } from "redux";
import authReducer from "./authReducer.js";
export const reducers=combineReducers({authReducer})

Store

import { legacy_createStore as createStore,applyMiddleware,compose } from "redux"
import thunk from "redux-thunk"
import {reducers} from "../reducers/index.js"
function saveToLocalStorage(store){
    try {
        const serializedStore=JSON.stringify(store)
        window.localStorage.setItem('store',serializedStore)
    } catch (error) {
        console.log(error)
    }
}
function loadFromLocalStorage(){
    try {
        const serializedStore=window.localStorage.getItem("store")
    if(serializedStore==null) return undefined
    return JSON.parse(serializedStore)
    } catch (error) {
        console.log(error)
        return undefined
    }

}
const composedEnhancers=window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose()
const persistedState=loadFromLocalStorage()
const store=createStore(reducers,persistedState,composedEnhancers(applyMiddleware(thunk)))
//so for everytime we ll change the store , that change will be reflected in the local storage as well 
store.subscribe(()=>saveToLocalStorage(store.getState()))
export default store

I have search many solutions for it on the internet as well as on the stack overflow but didnt figure it out. my actions are not triggering and the states in the reducer file is also not changing

Actions must be plain objects. Use custom middleware for async actions. not solving with previous techniques on stackoverflow

0 Answers0