Applicable React Redux example step by step from scratch

npx create-react-app reactapp
cd reactapp
yarn add react-redux

export const increment = (number) => {
    return {
        type: "INCREMENT",
        payload: number,
    };
};

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

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

export default counterReducer;

const loggedReducer = (state = false, action) => {
    switch (action.type) {
        case "SIGN_IN":
            return !state;
        default:
            return state;
    }
};

export default loggedReducer;

import counterReducer from "./counter";
import loggedReducer from "./isLogged";
import { combineReducers } from "redux";

const allReducers = combineReducers({
    //you can name it anything
    //counterReducer (this means counterReducer:counterReducer )
    counter: counterReducer,
    isLogged: loggedReducer,
});

export default allReducers;

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./actions";

function App() {
    const counter = useSelector((state) => state.counter);
    const isLogged = useSelector((state) => state.isLogged);
    const dispatch = useDispatch();

    return (
        <div className="App">
            <h1>Counter {counter} </h1>
            <button onClick={() => dispatch(increment(5))}>+</button>
            <button onClick={() => dispatch(decrement())}> -</button>
            {isLogged ? <h3>Valuable Information I shouldn't see</h3> : ""}
        </div>
    );
}

export default App;