hello everyone I am really new to React and Redux I was following a tutorial in which you create a app that have a state Context Provider.
import React, { createContext, useContext, useState } from 'react';
const StateContext = createContext();
const initialState = {
chat: false,
cart: false,
userProfile: false,
notification: false,
};
export const ContextProvider = ({ children }) => {
const [screenSize, setScreenSize] = useState(undefined);
const [currentColor, setCurrentColor] = useState('#03C9D7');
const [currentMode, setCurrentMode] = useState('Light');
const [themeSettings, setThemeSettings] = useState(false);
const [activeMenu, setActiveMenu] = useState(true);
const [isClicked, setIsClicked] = useState(initialState);
const setMode = (e) => {
setCurrentMode(e.target.value);
localStorage.setItem('themeMode', e.target.value);
};
const setColor = (color) => {
setCurrentColor(color);
localStorage.setItem('colorMode', color);
};
const handleClick = (clicked) => setIsClicked({ ...initialState, [clicked]: true });
return (
// eslint-disable-next-line react/jsx-no-constructed-context-values
<StateContext.Provider value={{ currentColor, currentMode, activeMenu, screenSize, setScreenSize, handleClick, isClicked, initialState, setIsClicked, setActiveMenu, setCurrentColor, setCurrentMode, setMode, setColor, themeSettings, setThemeSettings }}>
{children}
</StateContext.Provider>
);
};
export const useStateContext = () => useContext(StateContext);
with wiche you wrap the app.render with
<React.StrictMode>
<ContextProvider>
<App />
</ContextProvider>
</React.StrictMode>,
But now I want to use Redux-toolkit to manage states that are comming from a back-end server I think I need to converte what is indeide this ContextProvider into a reduxSlice but I have no idea how to do so and I tryed using Redux by wrap my app with the redux provider like so
ReactDOM.render(
<Provider store={store}>
<ContextProvider>
<App />
</ContextProvider>
</Provider>,
document.getElementById('root')
);
that also didn't work