Uncaught TypeError: Object is not iterable when using useReducer with useContext for global store React js

Question

I am trying to use hooks to replace the redux store with action and reducers I have created a global store using createContext and a global reducer using useReducer and trying to use the global state object with useContext in the below file which is throwing error. Also, I have tried console logging the return value of useContext(Store) which is giving undefined.

import React, {useContext, useEffect} from 'react'
import {newAction} from './actions'
import Store from '../../utils/store'
const Home = ()=>{
    console.log(Store)
    const [appStore, dispatch] = useContext(Store)
    useEffect(()=>{
        
        dispatch(newAction())
        console.log(appStore)
    },[]) 
    return(<div>Hello there</div>)
}

export default Home

Getting error index.jsx:7 Uncaught TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) at Home (index.jsx:7) at renderWithHooks (react-dom.development.js:14803) at line const [appStore, dispatch] = useContext(Store)

My App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './pages/home';
import './styles/index.scss'
import {StoreProvider} from './utils/store'

function App() {
  return (
    <div className="App">
    <StoreProvider>
      <Home/>
    </StoreProvider>
    
    </div>
  );
}

export default App;

My Store/index.js

import {createContext} from 'react'

const Store = createContext({});

export const StoreProvider = Store.Provider;

export default Store;

contextProvider.js

import React,{useReducer} from 'react';
import {ContextProvider} from './index'
import reducer from './combineReducer'

const initialState = { home:{} }

const StoreProvider = (props) =>{
    return <ContextProvider value={useReducer(reducer, initialState)}>
        {props.children}
    </ContextProvider>
}
export default StoreProvider

combineReducer.js

import homeReducer from '../../pages/home/reducer'
export default mainReducer = (initialState, action)=>{
    return({
        home: homeReducer(initialState.home, action)
    })
}

home/reducer.js

import {NEW_ACTION} from './actions'
export default reducer = (state,action) =>{
    switch(action.type){
        case NEW_ACTION: return {...state, val:true}
        default: return state
    }
}

why dont you do const [appStore, dispatch] = useReducer(reducer, initialState); then give both appStore and dispatch to the provider and use them. — Sujit.Warrier, Sep 14 '20 at 05:02

score 0 · Accepted Answer · answered Sep 14 '20 at 07:03

There were few mistakes in the code in the following files:

in file Store/index.js rename variable StoreProvider to ContextProvider as i am using ContextProvider which is not defined there.
in file App.js change the import line import {StoreProvider} from './utils/store' to import StoreProvider from './utils/store/contextProvider' as provider is written in contextProvider file.

Files after fixes:

Store/index.js

import {createContext} from 'react'
const Store = createContext({});
export const ContextProvider = Store.Provider;
export default Store;

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './pages/home';
import './styles/index.scss'
import StoreProvider from './utils/store/contextProvider'
function App() {
  return (
    <div className="App">
    <StoreProvider>
      <Home/>
    </StoreProvider>
    </div>
  );
}
export default App;

Uncaught TypeError: Object is not iterable when using useReducer with useContext for global store React js

1 Answers1