TypeError: Cannot read properties of undefined (reading ‘getState’) at /home/ubuntu/online-coding-judge/submissions/1466948/unit-6/sprint-4/day-3/assignments/ReactTheme/node_modules/react-redux/lib/components/Provider.js:36:57 at mountMemo (/home/ubuntu/online-coding-judge/submissions/1466948/unit-6/sprint-4/day-3/assignments/ReactTheme/node_modules/react-dom/cjs/react-dom.development.js:17225:19) at Object.useMemo (/home/ubuntu/online-coding-judge/submissions/1466948/unit-6/sprint-4/day-3/assignments/ReactTheme/node_modules/react-dom/cjs/react-dom.development.js:17670:16) at useMemo (/home/ubuntu/online-coding-judge/submissions/1466948/unit-6/sprint-4/day-3/assignments/ReactTheme/node_modules/react/cjs/react.development.js:1650:21) at Provider (/home/ubuntu/online-coding-judge/submissions/1466948/unit-6/sprint-4/day-3/assig
i got this error and not a pass single test case can any one please help me to find out whats wrong in code
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./Redux/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<App />
</Provider>
);
reportWebVitals();
import "./App.css";
import Counter from "./Components/Counter";
import Theme from "./Components/Theme";
function App() {
return (
<div className="App">
<Theme />
<Counter />
</div>
);
}
export default App;
import { legacy_createStore as createStore, combineReducers } from "redux";
import { counterReducer } from "./counterReducer";
import { themeReducer } from "./themeReducer";
const rootReducer = combineReducers({
counterReducer,
themeReducer,
});
const store = createStore(rootReducer);
export default store;
//Complete the reducer function logic inside the curly braces {}
// the theme initstate shouldbe light
import { CHANGE_THEME } from "./actionTypes";
const themeReducer = (state = "light", action) => {
switch (action.type) {
case CHANGE_THEME:
return action.payload;
default:
return state;
}
};
export { themeReducer };
//Complete the reducer function logic inside the curly braces {}
// the counter initstate shouldbe 10
import { ADD, REDUCE } from "./actionTypes";
const counterReducer = (state = 10, action) => {
switch (action.type) {
case ADD:
return state + action.payload;
case REDUCE:
return state - action.payload;
default:
return state;
}
};
export { counterReducer };
//DO NOT change the function names
import { ADD, REDUCE, CHANGE_THEME } from "./actionTypes";
const handleAdd = () => {
return { type: ADD, payload: 1 };
};
const handleReduce = () => {
return { type: REDUCE, payload: 1 };
};
const handleTheme = (theme) => {
return { type: CHANGE_THEME, payload: theme };
};
export { handleAdd, handleReduce, handleTheme };
import React from "react";
import { useSelector } from "react-redux";
import CounterValue from "./CounterValue";
import CounterButtons from "./CounterButtons";
import './counter.css'
const Counter = () => {
const theme = useSelector((state) => state.themeReducer);
return (
// the following div classname should be chnaged accrding to the theme
<div className={`counter ${theme === "light" ? "light-theme" : "dark-theme"}`} data-testid="counter">
<h1>Counter</h1>
<CounterValue />
<CounterButtons />
{/* Import CounterValue component here and DO NOT PASS anything through props, for this component */}
{/* Import CounterButtons component here and DO NOT PASS anything through props, for this component */}
</div>
);
};
export default Counter;
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { handleTheme } from '../Redux/action.js'
import './Theme.css'
const Theme = () => {
const dispatch = useDispatch();
const theme = useSelector((state) => state.themeReducer);
const handleThemeChange = (newTheme) => {
dispatch(handleTheme(newTheme));
};
return (
<div >
<button
data-testid="switchToLightButton"
disabled={theme === "light"}
onClick={() => handleThemeChange("light")}
>
Switch to Light
</button>
<button
data-testid="switchToDarkButton"
disabled={theme === "dark"}
onClick={() => handleThemeChange("dark")}
>
Switch to Dark
</button>
</div>
);
};
export default Theme;
import React from "react";
import { useSelector } from "react-redux";
const CounterValue = () => {
const counter = useSelector((state) => state.counterReducer);
return <div data-testid="counterValue">{counter}</div>;
};
export default CounterValue;
I am getting error please help me
