我正在尝试使用钩子将 redux 存储替换为 action 和 reducer 我使用 createContext 创建了一个全局存储,并使用 useReducer 创建了一个全局 reducer,并尝试在下面的文件中使用全局状态对象和 useContext,这会引发错误。另外,我尝试过控制台记录其返回值useContext(Store)
未定义。
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;
我的商店/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)
})
}
主页/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
}
}