[0]increment decrement button

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "../../features/CommonSliceReducer";
const ReduxNavigate = () => {
  const count = useSelector((state) => state.common.i);
  const dispatch = useDispatch();
  return (
    <div className="padding10">
      <span>ReduxNavigate</span>
      <div className="flexgap20">
        <div
          className="border"
          style={{
            width: "20px",
            height: "20px"
          }}
        >
          {count}
        </div>
        <span
          className="bgred100 padding10 rounded cursorpointer"
          onClick={() => {
            dispatch(increment());
          }}
        >
          increment
        </span>
        <span
          className="bgred100 padding10 rounded cursorpointer"
          onClick={() => {
            dispatch(decrement());
          }}
        >
          decrement
        </span>
      </div>
    </div>
  );
};

export default ReduxNavigate;

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

const initialState = {
  section: "common",
  i: 0
};
const CommonSliceReducer = createSlice({
  name: "common",
  initialState,
  reducers: {
    increment: (state) => {
      state.i += 1;
    },
    decrement: (state) => {
      state.i -= 1;
    }
  },
  extraReducers: {}
});
export const { increment, decrement } = CommonSliceReducer.actions;
export default CommonSliceReducer.reducer;

import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
import CommonSliceReducer from "./CommonSliceReducer";
const reducers = combineReducers({
  common: CommonSliceReducer
});
const store = configureStore({
  reducer: reducers
});
export default store;

import React from "react";
import "./App.css";

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Flexdirection from "./pages/css부분/flex/Flexdirection";
import { AtagId } from "./pages/페이지이동/Atag/AtagId";
import Scroll from "./pages/페이지이동/Scroll/Scroll";
import CheckboxUI from "./pages/css부분/checkbox/CheckboxUI";
import ScrollBt from "./pages/페이지이동/Scroll/ScrollBt";
import ReduxNavigate from "./pages/redux/ReduxNavigate";
import ReduxNavigate2 from "./pages/redux/ReduxNavigate2";
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/css/flex/flexdirection" element={<Flexdirection />} />
        <Route path="/atag/atag" element={<AtagId />} />
        <Route path="/scroll/scroll" element={<Scroll />} />
        <Route path="/scroll/scrollBT" element={<ScrollBt />} />
        <Route path="/checkbox/checkboxui" element={<CheckboxUI />} />
        <Route path="/navigate/navigate" element={<ReduxNavigate />} />
        <Route path="/navigate/reduxnavigate2" element={<ReduxNavigate2 />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;