[TIL] React 챗봇 만들기2 - redux-toolkit으로 챗봇 on/off여부 전역적인 상태관리

---

1. 챗봇 on/off state 전역 상태관리를 위한 redux 세팅

챗봇 on/off 상태는 모든 페이지에서 똑같이 인식해야하므로 redux-toolkit을 사용하여 전역적으로 관리해주어야 한다.

• redux에서 모듈 슬라이스 파일을 만들고, 모듈 슬라이스를 리덕스 configStore에 등록해줌

 

1) redux - module - chatBotUISlice.ts

import { createSlice } from '@reduxjs/toolkit';
import { ChatBotState } from '../../types/types';

const initialState: ChatBotState = {
  chatBotIsActive: false,
};

const chatBotUISlice = createSlice({
  name: 'chatBotUI',
  initialState,
  reducers: {
    toggleChatBotState: (state) => {
      state.chatBotIsActive = !state.chatBotIsActive;
    },
  },
});

export const { toggleChatBotState } = chatBotUISlice.actions;
export default chatBotUISlice.reducer;

 

 

2) redux - config - configStore.tsx

import { configureStore } from '@reduxjs/toolkit';
import chatBotUISlice from '../module/chatBotUISlice';
import userSlice from '../module/userSlice';
import modalSlice from '../module/modalSlice';

export const store = configureStore({
  reducer: {
    user: userSlice,
    modal: modalSlice,
    chatBotUI: chatBotUISlice,
  }
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

 

 

---

2. 챗봇 UI 컴포넌트 - Router.tsx에서 관리

1) shared - Router.tsx

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Main from '../pages/Main';
import Detail from '../pages/Detail';
import Mypage from '../pages/Mypage';
import Studyboard from '../pages/Studyboard';
import Freeboard from '../pages/Freeboard';
import Write from '../pages/Write';
import NotFound from '../pages/NotFound';
import PrivateRoute from './PrivateRoute';
import Layout from './Layout';

import { useAppDispatch, useAppSelector } from '../hooks';
import { RootState } from '../redux/config/configStore';
import { toggleChatBotState } from '../redux/module/chatBotUISlice';
import ChatBot from '../components/chatbot/ChatBot';
import ChatIcon from 'remixicon-react/QuestionAnswerFillIcon';

import * as S from '../styles/StChatBot';

const Router = () => {
  const { user } = useAppSelector((state: RootState) => state.user);
  const chatBotIsActive = useAppSelector((state: RootState) => state.chatBotUI.chatBotIsActive);
  const dispatch = useAppDispatch();
  const toggleChatBot = () => {
    dispatch(toggleChatBotState());
  };
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Layout />}>
          {/* ...Route 생략 */}

      {/* user가 있을 때만 챗봇 버튼이 보이도록 */}
      {user && (
        <>
          <S.ChatBotButton onClick={toggleChatBot}>
            <ChatIcon color="#fff" size={20} />
          </S.ChatBotButton>
          {chatBotIsActive ? <ChatBot /> : null}
        </>
      )}
    </BrowserRouter>
  );
};
export default Router;