What's the difference between useContext and Redux ?

// filename - App.js

import React, { createContext } from "react";
import "./index.css";
import ComB from "./ComB";

const Data = createContext();

export default function App() {
    return (
        <div className="App">
            <Data.Provider value={"Welcome to GFG"}>
                <ComB />
            </Data.Provider>
        </div>
    );
}

export { Data };

// Filename ComB.js

import React, { useState } from "react";
import ComC from "./ComC";

const ComB = () => {
    const [show, setShow] = useState(false);
    return (
        <>
            {show ? <ComC /> : null}
            <button onClick={() => setShow(!show)}>
                Click ME
            </button>
        </>
    );
};

export default ComB;

// Filename ComC.js

import React, { useContext } from "react";
import { Data } from "./App";

const ComC = ({ name }) => {
    const context = useContext(Data);
    return <h1>{context}</h1>;
};

export default ComC;

// filename - App.js

import React from "react";
import "./index.css";
import { useSelector, useDispatch } from "react-redux";
import { incNum, decNum } from "./actions/index";

function App() {
    const mystate = useSelector((state) => state.change);
    const dispatch = useDispatch();

    return (
        <>
            <h2>
                Increment/Decrement the number using Redux.
            </h2>
            <div className="app">
                <h1>{mystate}</h1>
                <button onClick={() => dispatch(incNum())}>
                    +
                </button>
                <button onClick={() => dispatch(decNum())}>
                    -
                </button>
            </div>
        </>
    );
}

export default App;

// actions/index.js

export const incNum = () => {
    return { type: "INCREMENT" };
};

export const decNum = () => {
    return { type: "DECREMENT" };
};

// reducers/func.js

const initialState = 0;

const change = (state = initialState, action) => {
    switch (action.type) {
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;
        default:
            return state;
    }
};

export default change;

// Filenme - reducers/index.js

import change from "./func";
import { combineReducers } from "redux";

const rootReducer = combineReducers({ change });

export default rootReducer;

// Filename - store.js

import { createStore } from "redux";
import rootReducer from "./reducers/index";

const store = createStore(
    rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

// Filename - index.js /src directory

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App.jsx";
import store from "./store";
import { Provider } from "react-redux";

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);