Redux 설정

henry·2024년 10월 4일

개요

Redux는 사용을 해도 되고 하지 않아도되는 선택적인 사항입니다.
Redux는 애플리케이션을 만들 때 State들을 다루기가 훨씬 편해집니다.
왜냐하면 Store라는 곳에서 전체 데이터는 가져오고 입력하면서 다루기 때문입니다.

즉, 바로 데이터를 업데이트 해줄 수가 있기 때문입니다.

두 번째 이미지의 완성본은 크롬에서 확장 프로그램으로 제공하는 Redux 탭입니다.

항목 설명

chatRoom

이 항목은 채팅방이 누구에 의해 생성됐고, 공개된 채팅방인지, 비밀 채팅방인지,
채팅방의 이름, 채팅방에 대한 설명 등등 채팅방에 대한 데이터를 가지고 있습니다.

import { createSlice } from '@reduxjs/toolkit';

Redux Toolkit의 createSlice를 가져옵니다. 이는 상태와 리듀서(reducer)를 정의하는 함수입니다.

initialState는 Redux에서 관리할 상태(state)의 초기값을 설정하는 부분입니다.
이 상태는 데이터베이스의 컬럼과는 다르지만, 전역적으로 사용할 상태의 기본값을 정의하는 것 입니다.

currentChatRoom : 현재 활성화된 채팅방의 정보를 담는 상태
craetedBy : 채팅방을 생성한 사람의 정보를 담는 객체
- image : 채팅방 생성자의 프로필 이미지 경로를 저장
- name : 채팅방을 만든 사람의 이름을 저장
description : 현재 채팅방의 설명을 저장하는 필드
id : 현재 채팅방의 고유 ID를 저장하는 필드
name : 현재 채팅방의 이름을 저장하는 필드
isPrivateChatRoom : 채팅방이 개인 채팅방인지 여부를 나타내는 불리언 값입니다. 초기 상태는 false로, 개인 채팅방이 아니라는 것을 의미합니다.
userPosts : 현재 사용자의 채팅방에서의 활동이나 게시물 등을 저장하는 필드

이 코드는 Redux Toolkit의 createSlice 함수를 사용해 채팅방과 관련된 상태를 관리하는 슬라이스(slice)를 정의하는 부분입니다.

전체 소스 코드

name: 'chatRoom'
슬라이스의 이름을 설정하는 부분입니다. 이 슬라이스의 이름은 'chatRoom'입니다.
이 이름은 Redux에서 액션 타입을 생성할 때 사용됩니다.
initialState
슬라이스의 초기 상태를 설정합니다. 이 부분에서는 이전에 정의한 initialState를 사용하고 있습니다. 초기 상태는 Redux 스토어에서 관리될 기본 상태를 정의합니다.

reducers 소스 코드 (전체 중 일부)

reducers: {...
슬라이스 내에서 상태를 변경하는 함수들을 정의하는 객체입니다.
각각의 리듀서 함수는 액션이 발생할 때 호출되어 상태를 업데이트합니다.
setCurrentChatRoom: (state, action) => {
setCurrentChatRoom 리듀서는 currentChatRoom 상태를 변경하는 역할을 합니다.
- state.currentChatRoom = action.payload;
  액션의 payload로 전달받은 값으로 currentChatRoom을 업데이트합니다.

setPrivateChatRoom: (state, action) => {
isPrivateChatRoom 상태를 변경하는 역할을 합니다.
- state.isPrivateChatRoom = action.payload;
  액션의 payload로 전달받은 값으로 isPrivateChatRoom 업데이트합니다.

setUserPosts: (state, action) => {
userPosts 상태를 변경하는 역할을 합니다.
- state.userPosts = action.payload;
  액션의 payload로 전달받은 값으로 userPosts 업데이트합니다.

export const { setCurrentChatRoom, setPrivateChatRoom, setUserPosts } = chatRoomSlice.actions;
각각의 상태를 업데이트하기 위한 슬라이스에서 정의한 액션 생성자(action creators)를 내보내는 부분입니다.
이 함수들은 컴포넌트에서 호출되어 상태를 업데이트할 수 있습니다.

코드의 주된 목적은 Redux에서 상태 관리 로직을 간단하게 처리하고, 채팅방 관련 상태를 쉽게 업데이트할 수 있게 해주는 것입니다.