React Hook and Redux Toolkit

React Hook :: useContext

Create context

import { createContext, useContext } from "react";

// 1. Create context
const MyContext = createContext("demo context");

export const DemoContextProvider = ({children}) => {
    const myValue = "Hello from context";
    // 2. Provider
    return (
        <MyContext.Provider value={myValue}>
            {children}
        </MyContext.Provider>
    );
}

export const ChildComponent = () => {
    // 3. Consumer
    const value = useContext(MyContext);
    return (
        <div>{value}</div>
    );
}

Use from component

return (
    <DemoContextProvider>
      <ChildComponent />
    </DemoContextProvider>
 )

Redux Toolkit

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useDispatch, useSelector } from 'react-redux';

// 1. Create a slice of the Redux store
const demoSlice = createSlice({
  name: 'demo',
  initialState: 'demo context',
  reducers: {
    setDemo: (state, action) => action.payload,
  },
});

export const { setDemo } = demoSlice.actions;

// 2. Create the Redux store
export const store = configureStore({
  reducer: {
    demo: demoSlice.reducer,
  },
});

export const DemoProvider = ({ children }) => {
  const dispatch = useDispatch();
  const myValue = 'Hello from Redux Toolkit';

  // Dispatch the action to set the demo value
  dispatch(setDemo(myValue));

  return <Provider store={store}>{children}</Provider>;
};

export const ChildComponent = () => {
  // Use the useSelector hook to access the demo value from the Redux store
  const value = useSelector((state) => state.demo);

  return <div>{value}</div>;
};