I can't find where the culprit is. I tried to debug it, but can't found what really make it those error:
cannot read properties of null (reading 'useContext') && react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
App.js
function App() {
return (
<React.Fragment>
<Counter/>
</React.Fragment>
);
}
export default App;
index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider context={StoreContext} store={Store()}>
<App />
</Provider>
);
reportWebVitals();
CounterReducer.js
const CounterReducer = (state = { count: 0 } , action) => {
switch (action.type) {
case handleDencrement:
return state.count - 1
case handleIncrement:
return state.count + 1
default:
return state
}
}
export default CounterReducer;
context.js
const StoreContext = React.createContext();
export default StoreContext ;
Store.js
const Store = () => {
const store = useStore(CounterReducer);
return store
}
export default Store;
types.js
export const handleIncrement = 'handleIncrement' ;
export const handleDencrement = 'handleDencrement';
Counter.js
const Counter = () => {
const [count, setcount] = useState(0);
const handleIncrement = () => {
setcount(count + 1);
}
const handleDencrement = () => {
setcount(count - 1);
}
return (
<div>
<center>
<h1>Redux</h1>
<h1>{count}</h1>
<button className="btn btn-primary" onClick={handleIncrement}>Increment</button>
<button className="btn btn-warning" onClick={handleDencrement}>decrement</button>
</center>
</div>
);
}
export default Counter;
contextprop of the reduxProvidercomponent is for very advanced use cases only. You do not need this. In fact I can't even explain what it's for because in all my years of react-redux I have never used it. – Pseudonymous