[React] redux-toolkit을 활용한 탭만들기 (how to make a tab menu with react and redux-toolkit)

1.페이지 내에서 탭 클릭시 보여줄 이벤트 ( 필자는 클릭시 비동기함수를 각각 불렀다)

로 페이지에서 보여줄 데이터를 매핑하는 코드를 만들어보았다.

탭을 클릭시 탭명이 postingSlice의 mainTab으로 상태가 변경 되고,

1.I made a onClick tab code which appears when you click the tab. You can find the mapping data when the click event runs. 

You must to concentrate to onClickToggle Function which i made. Inside of the code, there is a param and dispatch function. you can put param inside the dispatch function.

import React from "react";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  getPostingReadCount,
  mainTab,
} from "../../../../features/app/postingSlice";

const HomeTab = () => {
  const root =
    JSON.parse(window.localStorage.getItem("persist:root")) !== null &&
    JSON.parse(window.localStorage.getItem("persist:root")).login;
  const rootUserId = JSON.parse(root).isLoggedIn.userId;

  const dispatch = useDispatch();
  const on = "w-1/2 bg-gray-700 font-extrabold rounded-t-xl p-4 cursor-pointer";
  const off = "w-1/2 rounded-xl p-4 font-normal cursor-pointer";
  const tabs = ["tab1", "tab2"];
  const tabName = useSelector((state) => state.posting.mainTab);
  const onClickToggle = (el) => {
    dispatch(mainTab(el));
    let param = {
      userId: rootUserId,
      usingCount: el === "tab1" ? 1 : 0,
    };
   dispatch(getUsingCount(param));

  };
  return (
    <div className=" rounded-xl flex gap-x-3 text-center ">
      {tabs.map((el, idx) => (
        <div
          className={el === tabName ? on : off}
          key={idx}
          onClick={() => onClickToggle(el)}
        >
          {el}
        </div>
      ))}
    </div>
  );
};

export default HomeTab;

you can change the tabName to pass a value through a reducrs in createSlice Component. There is an initialState which you can custom the name of the default value. Put the initialState  inside the createSlice and  create a mainTab function inside. You can recieve the payload inside the initialState you made.

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import api from "../../common/api";

const initialState = {
  i: 0,
  status: null,
  mainTab: "tab1", //default값 설정
};

[...]

const postingSlice = createSlice({
  name: "posting",
  initialState,
  reducers: {
    mainTab: (state, action) => {
      state.mainTab = action.payload;
    },
  },

  extraReducers: {
[...]
  },
});

export const { mainTab} = postingSlice.actions;

export default postingSlice.reducer;

2.상태 변경된 payload 값인 tabName을 출력시킬 페이지에서 삼항다항식으로 출력하면 간단하게 tab페이지를 출력할 수 있다.

이러한 방식으로 탭 내의 탭을 출력할 수도 있다.

2.Once you put the value using the dispatch function, you can get some output using useSelector. 

Just using useSelector and you can print the changed state easily.

const tabName = useSelector((state)=>state.posting.tabName);
const postingList = useSelector((state)=>state.posting.postingList);
return(
	[...]
        <div className="px-6 pt-4">
          <HomeTab />
          //tab클릭시 보여지는 내용물
          <div className="bg-gray-700 pt-4 rounded-b-xl">
            <div className="relative top-0 px-6 flex flex-col gap-y-3 py-4">
              {tabName === "tab1"
                ? postingList.map((el, index) => (
                    <HomeBookList el={el} key={index} />
                  ))
                : postingList.map((el, index) => (
                    <HomeBookList el={el} key={index} />
                  ))}
            </div>
          </div>
           //tab클릭시 보여지는 내용물
        </div>
        [...]
  )
  export default SomethingPage;