Uncaught TypeError: объект не повторяется при использовании useReducer с useContext для глобального хранилища React js

Я пытаюсь использовать хуки, чтобы заменить хранилище redux на действие и редукторы. Я создал глобальное хранилище, используя createContext, и глобальный редуктор, используя useReducer, и пытаюсь использовать объект глобального состояния с useContext в приведенном ниже файле, который вызывает ошибку. Кроме того, я пробовал консоль регистрировать возвращаемое значение useContext(Store), которое дает 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

Ошибка 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) в строке const [appStore, dispatch] = useContext(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'

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

export default App;

Мой 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

combReducer.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
    }
}

reactjs javascript react-hooks use-reducer use-context
person Sikarwar    schedule 14.09.2020    source источник
comment
почему бы вам не сделать const [appStore, dispatch] = useReducer (reducer, initialState); затем передайте и appStore, и dispatch провайдеру и используйте их.   -  person Sujit.Warrier    schedule 14.09.2020
comment
@ Sujit.Warrier, где мне это использовать?   -  person Sikarwar    schedule 14.09.2020
comment
поставщик контекста   -  person Sujit.Warrier    schedule 14.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

В следующих файлах было несколько ошибок в коде:

  1. в файле Store / index.js переименуйте переменную StoreProvider в ContextProvider, поскольку я использую ContextProvider, который там не определен.
  2. в файле App.js измените строку импорта import {StoreProvider} from './utils/store' на import StoreProvider from './utils/store/contextProvider', поскольку провайдер записан в файле contextProvider.

Файлы после исправлений:

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;
person Sikarwar    schedule 14.09.2020